Скрытие лишних элементов в списке с помощью jQuery в сложной ситуации (разметка не идеальна)

Question

Я хочу сделать длинный список коротким, скрывая некоторые элементы в длинных подсписках без дополнительной обработки на стороне сервера. Проблема в том, что разметка, исходящая от сервера, не контролируется мной и не предназначена для облегчения моей работы. вот код

<ul id="long-list">
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="header"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
  <li class="header"></li>
  <li class="item"></li>
  .
  .
  .
</ul>

Как вы заметили, заголовки совпадают с предметами. Теперь я хочу иметь код jQuery, который показывает только 3 элемента после каждого заголовка и скрывает остальные, чтобы сделать список короче и более удобным для использования.

Вот моя попытка, которая не работает:

  $('#long-list li.header ~ li.item:gt(3)').hide();
  $('#long-list li.header ~ li.item:lt(3)').show();
  $('#long-list li.header').show();

Дополнительная функция - добавление узла внизу каждого раздела, в котором есть скрытые элементы, с указанием количества скрытых элементов, например, «еще 5 ...»

Answer 1

Может быть возможно сделать лучше, но это должно работать:

var i = 0;
$("#long-list li.header:first").nextAll("li").each(function(){
  i = $(this).hasClass("header") ? 0 : i+1;
  $(this).toggle(i<=3);
});

(Обновлено, чтобы не скрывать элементы перед первым заголовком.)

Answer 2

Вот как я это реализовал. Обратите внимание, что у него есть некоторые другие функции, такие как добавление узла в конце подсписков, в котором есть скрытые элементы, например, x элементов скрыты и связывают событие onclick для переключения скрытых элементов.

  if ($('#list li.header')[0]) {      
      var i = -1000;
      $("#list > li").each(function(){
        if ($(this).hasClass("header")) {
          (i>3) && ($(this).before( "<li  class='more'>" + (i-3) + " more...</li>").bind("click", toggle_more() )  );
          i = 0;
        } 
        else {
          i = i+1; 
        }
        $(this).toggle(i<=3);
      });
  }

Это в основном основано на том, что Свинто сказал выше. Я все еще ищу лучшую производительность. Во всяком случае, сейчас я доволен результатами.

Инициализация i с -1000 гарантирует, что мы не будем скрывать элементы в верхней части списка, у которых нет заголовка. как только мы дойдем до заголовка, мы установим i в ноль и начнем считать.

Answer 3

Мне кажется, что это работает, и логически следует цели вашей первоначальной попытки, используя только селектор братьев и сестер.

  $("li.header:first").prevAll("li.item").hide();
  $("li.header").each(function() {
    $(this).nextAll("li.item:lt(3)").show();
    $(this).nextAll("li.item:gt(3)").hide();
  });

Answer 4

Вы не можете сделать это без цикла в jquery.