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

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, '') : 当我们使用上面解释的选择时，它可能有回车和空格。所以要删除我们正在使用这个正则表达式。

工作演示

$(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>