Question

我想找到ul.level-1的所有li.item后代：

$('ul.level-1').find('li.item')

然后获取完整的选择器路径，如ul.level-1 > li > ul.level-2 > li > ul.level-3 > li.item，所以我可以将此选择器传递给jQuery插件，该插件只接受字符串。

是否有用于查找选择器路径的函数/插件？

<ul class="level-1">
  <li>I</li>
  <li>II
      <ul class="level-2">
        <li>A</li>
        <li>B
          <ul class="level-3">
            <li class="item">1</li>
            <li class="item">2</li>
            <li class="item">3</li>
          </ul>
        </li>
        <li>C</li>
      </ul>
   </li>
   <li>III</li>
</ul>

Answer 1

通过使用以下代码，您可以逐级提取列表元素的值。

<强>解释

►$('ul[class^="level-"]').each(function(e){ ：这用于循环所有ul，其中的课程以level-

开头

►$(this).find('>li').map(function(){.....}).get(); ：这用于遍历所选元素并将值转换为数组。

►$(this).clone().children().remove().end().text() ：这仅用于检索未嵌套在子标记中的文字。

►.replace(/[\n\r]+/g, '') ：当我们使用上述选择时，它可能有回车和空格。所以要删除我们正在使用此RegEx。

工作演示

$(document).ready(function(){
    $('ul[class^="level-"]').each(function(e){
        var array = $(this).find('>li').map(function(){
          return $(this).clone().children().remove().end().text().replace(/[\n\r]+/g, ''); 
        }).get();
        console.log(array)
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="level-1">
  <li>I</li>
  <li>II
      <ul class="level-2">
        <li>A</li>
        <li>B
          <ul class="level-3">
            <li class="item">1</li>
            <li class="item">2</li>
            <li class="item">3</li>
          </ul>
        </li>
        <li>C</li>
      </ul>
   </li>
   <li>III</li>
</ul>

jQuery：找到后代并获取选择器路径

1 个答案: