JQuery: найти потомков и получить путь Selector

Question

Я хочу, чтобы найти все li.item потомков ul.level-1:

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