Как обратиться ко всем контейнерам в js?

Question

[ascold2013]

Здравствуйте! Такая проблема - хочу вывести 6 элементов в каждом списке контейнера. Следующий jquery код выводит элементы только в первом блоке. А в следующих нет. Как правильно сделать выборку, чтобы слайс отработал во всех блоках calculator_price?

//Разметка
<div class="calculator_price">
                    <ul class="calculator_price_list">
                        <li class="calculator_price__item title">...</li>
                        ...
                   </ul>
</div>
...
<div class="calculator_price">
...
//Jquery
$(".calculator_price").find(".calculator_price__item").slice(0, 6).css({display: 'flex'});

Answer 1

[0xD34F]

Где элементы находятся, что за элементы, скольким какой стиль надо назначить:

const containerSelector = '.calculator_price';
const itemSelector = '.calculator_price__item';
const count = 6;
const key = 'display';
const val = 'flex';

Назначаем:

$(containerSelector)
  .find(`${itemSelector}:lt(${count})`)
  .css({ [key]: val });

или

$(`${containerSelector} ${itemSelector}`)
  .filter((i, n) => $(n).index() < count)
  .css(key, val);

или

for (const n of document.querySelectorAll(containerSelector)) {
  for (const m of [...n.querySelectorAll(itemSelector)].slice(0, count)) {
    m.style.setProperty(key, val);
  }
}

или

document.querySelectorAll(containerSelector).forEach(n => {
  n.querySelectorAll(itemSelector).forEach((m, i) => {
    m.style[key] = i < count ? val : '';
  });
});

Answer 2

[Олег]

Если я правильно понял, то функция each должна тут помочь.

$('.calculator_price').each(function(){
	$(this).find(".calculator_price__item").slice(0, 6).css({display: 'flex'});
});