2

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

$(".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>
4
  • $($('.product')[0]).find('.img_block_coll img').lenfth - поиск в первом блоке с классом product
    – cauf
    24 авг 2020 в 14:34
  • спасибо, но нужно пройтись по всем блокам product и посчитать кол-во
    – ilyaaa521
    24 авг 2020 в 14:36
  • засуньте этот код в цикл с итерацией по индексу вместо [0] - это базовые знания js. Хотя в этом случае я решительно не понимаю в чем отличие от селектора .product .img_block_coll img
    – cauf
    24 авг 2020 в 14:42
  • map() помогло $(".img_block_coll").map(function() { var col = $(this).find('img').length; console.log(col); });
    – ilyaaa521
    24 авг 2020 в 14:52

3 ответа 3

2

$(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>

1

Для этой задачи можно не считать длину, а использовать 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>

1

Данная функция перебирает каждый из блоков 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.