1

Подскажите, пожалуйста, как правильно подсчитать и вывести в <span></span> количество элементов в разных блоках (для каждого отдельно) с помощью атрибута data-*? Благодарю!

var texts = document.querySelectorAll(".list"),
  suball = texts.length;
$('span').append(suball);
.list__container {
  display: inline-block;
  margin: 15px;
  padding: 5px;
  border: 1px solid gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list__container" data-id="list__container__1">
  <div class="list">Строка 1</div>
  <div class="list">Строка 2</div>
  <div class="result">Количество строк: <span></span></div>
</div>
<div class="list__container" data-id="list__container__2">
  <div class="list">Строка 1</div>
  <div class="result">Количество строк: <span></span></div>
</div>
<div class="list__container" data-id="list__container__3">
  <div class="list">Строка 1</div>
  <div class="list">Строка 2</div>
  <div class="list">Строка 3</div>
  <div class="result">Количество строк: <span></span></div>
</div>
<ul class="list__container" data-id="list__container__4">
  <li class="list">Строка 1</li>
  <li class="list">Строка 2</li>
  <li class="list">Строка 3</li>
  <div class="result">Количество строк: <span></span></div>
</ul>

1 ответ 1

2

$('.list__container').each(function(){
  $(this).find('.result').text($(this).find('.list').length);
});
.list__container {
  display: inline-block;
  margin: 15px;
  padding: 5px;
  border: 1px solid gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="list__container" data-id="list__container__1">
  <div class="list">Строка 1</div>
  <div class="list">Строка 2</div>
  <div class="result">Количество строк: <span></span></div>
</div>
<div class="list__container" data-id="list__container__2">
  <div class="list">Строка 1</div>
  <div class="result">Количество строк: <span></span></div>
</div>
<div class="list__container" data-id="list__container__3">
  <div class="list">Строка 1</div>
  <div class="list">Строка 2</div>
  <div class="list">Строка 3</div>
  <div class="result">Количество строк: <span></span></div>
</div>
<ul class="list__container" data-id="list__container__4">
  <li class="list">Строка 1</li>
  <li class="list">Строка 2</li>
  <li class="list">Строка 3</li>
  <div class="result">Количество строк: <span></span></div>
</ul>

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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