jQuery: kökenini bulmak ve seçici patikayı

Question

olsun ben ul.level-1'in tüm li.item kökenini bulmak istiyorum:

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

ve sonra ul.level-1 > li > ul.level-2 > li > ul.level-3 > li.item gibi tam seçici yolunu almak, bu yüzden geçebilir Bu seçici sadece dizeleri kabul eden bir jQuery eklentisine.

Seçici yolunu bulmak için herhangi bir işlev/eklenti var mı?

<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

Aşağıdaki kodu kullanarak, liste öğesi düzeyinin değerini düzeyine göre ayıklayabilirsiniz.

açıklama

► $('ul[class^="level-"]').each(function(e){: değerleri Bu, seçilen elemanları döngü kullanılır ve alma: Bu döngü için kullanılan tüm sınıf ul$(this).find('>li').map(function(){.....}).get();► level-

ile başlayan bir diziye.

► $(this).clone().children().remove().end().text(): Bu, yalnızca alt etiketlere yerleştirilmemiş metinleri almak için kullanılır.

► .replace(/[\n\r]+/g, ''): Yukarıda açıklanan seçimi kullandığımızda, satır başı ve boşluğu olabilir. Bu yüzden bu RegEx'i kullanıyoruz.

Çalışma Demo

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