jquery - как срезать элементы в двух разных неупорядоченных списках?

Question

У меня есть два набора неупорядоченных списков с тем же именем класса, и я хочу подмножить его с помощью jquery slice.

var currentCount= 0; 
var maxCount= 3; 
$('.ulClassName>li').slice(currentCount,maxCount).show(); 

Это отлично работает для первого UL (это показывает только первые три списка), но не разрезают второй UL с тем же именем класса. Ниже разметка:

<ul class="ulClassName" id="firstUL"> 
<li>Blah blah1 </li> 
<li>Blah blah2 </li> 
<li>Blah blah3 </li> 
<li>Blah blah4 </li> 
<li>Blah blah5 </li> 
<li>Blah blah6 </li> 
</ul> 
<ul class="ulClassName" id="secondUL"> 
<li>Blah blah1 </li> 
<li>Blah blah2 </li> 
<li>Blah blah3 </li> 
<li>Blah blah4 </li> 

Я понимаю, что JQuery индексирует весь список элементы на странице, я не хочу писать отдельный код для двух списков, может кто-нибудь мне помочь?

Answer 1

Вы можете позвонить:

$('.ulClassName').each(function() { 
    $(this).find('li').slice(currentCount, maxCount).show(); 
}); 

Answer 2

Альтернативой является использование nth-child селектор в сочетании с nextAll, чтобы избежать использования slice, который действует на всей совокупности все сразу:

$('.ulClassName > li:nth-child(4)').prevAll().show(); 

Альтернативно,

$('.ulClassName > li:nth-child(3) ~ li').hide(); 

(Это скрывает все под третьим li элемента, который отличается от первого, но должно быть более эффективным, поскольку ~ li может быть оценена document.querySelectorAll() для современных браузеров)

Answer 3

$('ul.sideFilter').each(function(){ 

$(this).find('li').slice(5).wrap("<ul></ul>"); 


});