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

105

14 февраля 2022, 07:50

Подскажите, пожалуйста, как правильно подсчитать и вывести в <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>

Answer 1

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

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Не работает обработчик событий

Есть скрипт для страницы, который применяет методы fadeIn и fadeOut для некоторых блоков, при ширине окна браузера более 900 pxПроблема в том, что если...

SQL Запрос с выборкой

Извините если неправильно пишу вопрос,новуенький просто! У меня есть база данных, в ней есть таблица Children, где находится их возраст И есть...

Как залить проект с бд на гитхаб?

Делаю проект aspnet core с бд, как мне залить проект в месте с бд() что-бы я мог его развернуть на другой машине??

156

C# Dictonary поиск по string ключу

Есть Dictonary заполненный даннымиКлюч строка вида: 2019-12-28 11:00:00Z