Скрыть вложенные элементы html, кроме первых двух (jQuery)?

Question

У меня есть структура вроде этого:

<ol class="feeds"> 
    <li class="feed"></li> 
    <strong> 
    <li class="feed"></li> 
    <strong> 
     <li class="feed"></li> 
     <strong> 
     <!-- and so on --> 
     </strong> 
    </strong> 
    </strong> 
</ol> 

Как можно скрыть все .feed элементы, кроме первого и второго?

Answer 1

Попробуйте: -

$(".feed:gt(1)").hide(); //since JavaScript arrays use 0-based indexing so we have to use '1' in index. 

Подробнее о :gt()here.

Answer 2

Использование JQuery:

$(".feed").each(function(i) { 
    if (i == 1 || i == 2) return; 
    $(this).hide(); 
}); 

Answer 3

Вы также можете использовать ниже:

$('.feed:not(:nth-child(1)),.feed:not(:nth-child(2))').hide(); 

Answer 4

Использование $(".feed:gt(1)").hide() так:

$(".feed:gt(1)").hide()

<ol class="feeds"> 
 
    <li class="feed">f</li> 
 
    <strong> 
 
    <li class="feed">s</li> 
 
    <strong> 
 
     <li class="feed">t</li> 
 
     <strong> 
 
     <!-- and so on --> 
 
     </strong> 
 
    </strong> 
 
    </strong> 
 
</ol>

Answer 5

Лучше использовать CSS совместимый селектор $('.feed:nth-child(n+3)').hide(), в котором п> = 0, и счетчик начинается с 1.

Или может быть, вы может просто избавиться от JS, использовать только CSS .feed:nth-child(n+3) { display: none; }