Показать часть элементов JS

Question

Есть элементы у которых есть атрибут data-slick-index, нужно скрыть элементы у которых значение этого атрибута больше 8, то-есть показать 8 элементов на странице

$(".Slider__Item--Valign").map(function() {
                var brand = $(this).attr('data-slick-index');
                if(brand > 8){
                                    $(this).hide();
                                }
              });

Вот так почему то не срабатывает

Answer 1

Вот таким образом отрабатывает. Не знаю как в жквери работать с дата-атрибутами, но на чистом жс вот так получается скрыть.

let els = [...document.querySelectorAll('div')];

// elemArr - массив элементов
// amount - количество элементов для отображения (= значению data-slick-index)
function showElems(elemArr, amount) {
  elemArr.forEach(elem => {
    if(elem.dataset.slickIndex > amount) {
      elem.style.display = 'none';
    }
  });
}

showElems(els, 8);

<div data-slick-index="1">1</div>
<div data-slick-index="2">2</div>
<div data-slick-index="3">3</div>
<div data-slick-index="4">4</div>
<div data-slick-index="5">5</div>
<div data-slick-index="6">6</div>
<div data-slick-index="7">7</div>
<div data-slick-index="8">8</div>
<div data-slick-index="9">9</div>
<div data-slick-index="10">10</div>
<div data-slick-index="11">11</div>

Answer 2

[data-slick-index] — CSS-селектор атрибута.

$('[data-slick-index]').filter(function() {
  return $(this).attr("data-slick-index") > 8;
}).hide();

jQuery-filter вызыает переданную функцию для всех элементов, и оставляет только те элементы, для которых функция вернула true.

То-есть показать 8 элементов на странице

Вы не показали разметку... если там обычная нумерация, и элементы всегда идут один за другим,

$('[data-slick-index]').slice(8).hide();

БЛОГ НА HUSL

Показать часть элементов JS

Ответы (2 шт):