首页 > 解决方案 > 仅获取 JQuery 选择的 HTML 标记

问题描述

我正在使用 JQuery 来解决间歇性问题。我有一个选择器,我想查看元素,只是它抓取的 HTML 标记。

例如,我的选择器是($'[id^=superfish-utility--3-accordion]'). 我可以使用.outerHTML它的所有内部结构并获得匹配

<ul id="superfish-utility--3" class="menu sf-menu sf-utility sf-horizontal sf-style-none nav nav-pills"><li id="utility-menu-link-contentf569d1cf-0a1d-4719-b9c1-d504e38dba38" class="sf-depth-1 menuparent"><a href="" class="sf-depth-1 menuparent">News &amp; events</a><ul>...</ul>

但我想在控制台日志中看到的只是<ul id="superfish-utility--3" class="menu sf-menu sf-utility sf-horizontal sf-style-none nav nav-pills">...</ul>

我怎样才能得到那个?

编辑这是我的代码。Woodrow 的答案在内联环境中对我有用,但是当我尝试将其调整到现有脚本时,我仍然会得到包含其全部内容的标签:

$('[id^=superfish-utility--3]').each(function(){
  console.log($(this)[0]);

标签: jquery

解决方案


我相信这就是你要找的?DOM object使用 jQuery获取selectorHTML[0]代码本身?

$('[id^=superfish-utility--]').each(function() {
  console.log(this);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="superfish-utility--3-accordion" class="menu sf-menu sf-utility sf-horizontal sf-style-none nav nav-pills">
  <li id="utility-menu-link-contentf569d1cf-0a1d-4719-b9c1-d504e38dba38" class="sf-depth-1 menuparent"><a href="" class="sf-depth-1 menuparent">Accordion #3</a>
  </li>
</ul>

<ul id="superfish-utility--4-accordion" class="menu sf-menu sf-utility sf-horizontal sf-style-none nav nav-pills">
  <li id="utility-menu-link-contentf569d1cf-0a1d-4719-b9c1-d655638dba39" class="sf-depth-1 menuparent"><a href="" class="sf-depth-1 menuparent">Accordion #4</a>
  </li>
</ul>


推荐阅读