Переключение видимых элементов списка с помощью 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();
});