Переключить видимые элементы списка с помощью jQuery

Question

У меня есть несколько неупорядоченных списков на моей странице. В каждом списке я хочу показывать только первые пять элементов списка по умолчанию, а затем ссылку, которая включает и выключает отображение оставшихся элементов.

Я начал с этим:

$("ul li").slice(5).hide();

Но в конечном итоге скрывая все элементы во всех списках в первой пятерке в первом списке, за исключением, потому что все они посчитаны вместе.

Как это сделать, но если это повлияет на каждый список отдельно (обратите внимание, что я не могу добавить уникальные идентификаторы в каждый список)?

Answer 1

Вы должны использовать функцию each, чтобы сделать это для каждого <ul> вас есть. Попробуйте что-то вроде этого:

$("ul").each(function(){ 
    $(this).children().slice(5).hide(); 
}); 

Затем используйте код, как это, чтобы показать им все:

$("#btn").click(function(){ 
    $("ul").each(function(){ 
     $(this).children().show(); 
    }); 
}); 

Вот jsfiddle: http://jsfiddle.net/F8ByE/

Надеется, что это помогает :)

Answer 2

Вы можете перебирать каждый ul элементы, а затем скрыть li элементы

$("ul").each(function() { 
    $(this).find('li:gt(5)').hide(); 
});