Как скрыть элементы начиная с четвёртого в нескольких списках?

Question

[aliasst]

Есть три одинаковых блока, вот таких:

<ul class="list">
  <li>элемент 1</li>
  <li>элемент 2</li>
  <li>элемент 3</li>
  <li>элемент 4</li>
  <li>элемент 5</li>
  <li>элемент 6</li>
</ul>

Нужно в каждом из них, скрыть элементы списка начиная с 4-го.
Делаю это так: $('.list li').slice(3).hide();.

В результате открытыми остаются только 3 элемента в 1-списке, во втором и третьем скрываются все элементы.

А нужно в каждом по три скрыть.

Answer 1

[0xD34F]

$('.list').find('li:gt(2)').hide();
// или
$('li:gt(2)', '.list').hide();
// или
$('.list li:nth-child(3)').nextAll().hide();
// или
$('.list li:nth-child(n + 4)').hide();
// или
$('.list li').next().next().next().hide();
// или
$('.list > + + +').hide();

Или, к чёрту jquery:

Array
  .from(document.querySelectorAll('.list'))
  .flatMap(n => [...n.children].slice(3))
  .forEach(n => n.hidden = true);

// или (тут надо будет стиль добавить: .hidden { display: none; })

[].forEach.call(document.getElementsByClassName('list'), n => {
  [].forEach.call(n.getElementsByTagName('li'), (m, i) => {
    m.classList.toggle('hidden', i > 2);
  });
});

Если подобное надо выполнять неоднократно, а селекторы и количество элементов, оставляемых видимыми, разнятся, то можно и функцию сообразить (чтобы можно было делать так, например: hide('.list', 'li', 3);):

function hide(containerSelector, elementSelector, hideFrom) {
  $(containerSelector).each((i, n) => {
    $(elementSelector, n).slice(hideFrom).hide();
  });
}

// или

function hide(containerSelector, elementSelector, hideFrom) {
  for (const n of document.querySelectorAll(containerSelector)) {
    const elements = n.querySelectorAll(elementSelector);
    for (let i = hideFrom; i < elements.length; i++) {
      elements[i].style.display = 'none';
    }
  }
}