Как посчитать количество элементов в определенном блоке div? JS

Question

Как можно посчитать количество элементов в определенном блоке?

$(".img_block_coll img").length

считает все .img_block_coll img на странице, а мне нужно почитать для каждого блока .product, и скрыть остальные img если их количество больше 2-х.

<div class="product">
   <div class="img_block">
      <img>
      <img>
      <img> 
   </div>
</div>
<div class="product">
   <div class="img_block">
      <img>
      <img>
      <img>
      <img>
      <img>
   </div>
</div>

Answer 1

$(document).on('click', '.product', function (e) {
  console.log($(this).find(".img_block img").length)
})

.product {
  margin: 1em;
  border: 1px solid;
}

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div class="product">
  <div class="img_block">
    <img>
    <img>
    <img>
  </div>
</div>
<div class="product">
  <div class="img_block">
    <img>
    <img>
    <img>
    <img>
    <img>
  </div>
</div>

Answer 2

Для этой задачи можно не считать длину, а использовать CSS псевдокласс, например, nth-of-type
.img_block > img:nth-of-type(n+3) этот селектор расшифровывается так:
в элементе с классом .img_block на первой уровне вложенности найти все теги img, начиная с третьего элемента(вместо n подставляется 0, 1, 2 и т.д.)

на CSS:

.img_block > img:nth-of-type(n+3) {
  display: none;
}

<div class="product">
   <div class="img_block">
      <img src="https://i.picsum.photos/id/974/200/300.jpg?hmac=QEuRqsjG8spkqu72dWfkl4m-kSl5p-CEfHgx9dnnZLo">
      <img src="https://i.picsum.photos/id/974/200/300.jpg?hmac=QEuRqsjG8spkqu72dWfkl4m-kSl5p-CEfHgx9dnnZLo">
      <img src="https://i.picsum.photos/id/974/200/300.jpg?hmac=QEuRqsjG8spkqu72dWfkl4m-kSl5p-CEfHgx9dnnZLo">
   </div>
</div>
<div class="product">
   <div class="img_block">
      <img src="https://i.picsum.photos/id/974/200/300.jpg?hmac=QEuRqsjG8spkqu72dWfkl4m-kSl5p-CEfHgx9dnnZLo">
      <img src="https://i.picsum.photos/id/974/200/300.jpg?hmac=QEuRqsjG8spkqu72dWfkl4m-kSl5p-CEfHgx9dnnZLo">
      <img src="https://i.picsum.photos/id/974/200/300.jpg?hmac=QEuRqsjG8spkqu72dWfkl4m-kSl5p-CEfHgx9dnnZLo">
      <img src="https://i.picsum.photos/id/974/200/300.jpg?hmac=QEuRqsjG8spkqu72dWfkl4m-kSl5p-CEfHgx9dnnZLo">
      <img src="https://i.picsum.photos/id/974/200/300.jpg?hmac=QEuRqsjG8spkqu72dWfkl4m-kSl5p-CEfHgx9dnnZLo">
   </div>
</div>

JS:

const img_to_remove = document.querySelectorAll('.img_block > img:nth-of-type(n+3)');

img_to_remove.forEach((item) => item.remove());

<div class="product">
   <div class="img_block">
      <img src="https://i.picsum.photos/id/974/200/300.jpg?hmac=QEuRqsjG8spkqu72dWfkl4m-kSl5p-CEfHgx9dnnZLo">
      <img src="https://i.picsum.photos/id/974/200/300.jpg?hmac=QEuRqsjG8spkqu72dWfkl4m-kSl5p-CEfHgx9dnnZLo">
      <img src="https://i.picsum.photos/id/974/200/300.jpg?hmac=QEuRqsjG8spkqu72dWfkl4m-kSl5p-CEfHgx9dnnZLo">
   </div>
</div>
<div class="product">
   <div class="img_block">
      <img src="https://i.picsum.photos/id/974/200/300.jpg?hmac=QEuRqsjG8spkqu72dWfkl4m-kSl5p-CEfHgx9dnnZLo">
      <img src="https://i.picsum.photos/id/974/200/300.jpg?hmac=QEuRqsjG8spkqu72dWfkl4m-kSl5p-CEfHgx9dnnZLo">
      <img src="https://i.picsum.photos/id/974/200/300.jpg?hmac=QEuRqsjG8spkqu72dWfkl4m-kSl5p-CEfHgx9dnnZLo">
      <img src="https://i.picsum.photos/id/974/200/300.jpg?hmac=QEuRqsjG8spkqu72dWfkl4m-kSl5p-CEfHgx9dnnZLo">
      <img src="https://i.picsum.photos/id/974/200/300.jpg?hmac=QEuRqsjG8spkqu72dWfkl4m-kSl5p-CEfHgx9dnnZLo">
   </div>
</div>

Answer 3

Данная функция перебирает каждый из блоков product, проверяя в них количество элементов img, и если их больше двух, то скрывает их:

function handleClick() {
  $(".product").each(function() {
    const $imgs = $(this).find("img")
    if ($imgs.length > 2) {
      $imgs.hide()
    }
  })
}

$("button").on("click", handleClick)

button {
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="product">
  <p>Block 1</p>
  <div class="img_block">
    <img src="https://hhh.com" />
    <img src="https://hhh.com" />
    <img src="https://hhh.com" />
  </div>
</div>
<div class="product">
  <p>Block 2</p>
  <div class="img_block">
    <img src="https://hhh.com" />
    <img src="https://hhh.com" />
    <img src="https://hhh.com" />
    <img src="https://hhh.com" />
    <img src="https://hhh.com" />
  </div>
</div>
<div class="product">
  <p>Block 3</p>
  <div class="img_block">
    <img src="https://hhh.com" />
    <img src="https://hhh.com" />
  </div>
</div>

<button>Hide if more than two</button>

БЛОГ НА HUSL

Как посчитать количество элементов в определенном блоке div? JS

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