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

Question

[Илья Паршаков]

Здравствуйте! Друзья, прошу помощи, никак не получается осуществить задуманное.
Приведу простой пример:

<div class="main">
      <div class="div"></div>
      <div class="div"></div>
</div>

<div class="main">
      <div class="div"></div>
      <div class="div"></div>
      <div class="div"></div>
</div>

<div class="main">
      <div class="div"></div>

</div>

<div class="main">
      <div class="div"></div>
      <div class="div"></div>
      <div class="div"></div>
      <div class="div"></div>
</div>

Изначально блоков нет. Есть кнопка при нажатии на которую создается блок .main в этом блоке есть другая кнопка, при нажатии на которую создаются дочерние блоки .div.

Как подсчитать количество элементов с class="div" в каждом блоке class="main", например для их нумерации.
К примеру блоки <div class="div"></div> создаются динамически и хотелось бы им присваивать порядковый номер. Понимаю, что нужно воздействовать на указание объекта this, но не могу разобраться с этим :(

На данный момент, это считает количество всех элементов:
$('.main .div').length;

Большое спасибо за внимание и помощь!

Answer 1

[Merzley]

$('.main').each(function(){
    alert($(this).find('.div').length);
})

Comments

[Илья Паршаков]

неа, выдает одинаково:
[object Object]1

[Вадим Дунькин]

Илья Паршаков, тогда так попробуй

let mainDivs = $('.main').find('.div');
$.each(mainDivs, function(index, item){
    console.log($(item).length);
});

[Сергей Сергей]

$( '.main' ).each( function() {
  alert( $( '.div', this ).length );
} )

испытайте кто-нибудь.

[Merzley]

Хм... Вот первый вариант: https://jsfiddle.net/newne76t/

По очереди alert`ом выводит количество .div в каждом из .main. Может вы что-то не до конца скопировали?

[Илья Паршаков]

Вадим Дунькин, неа, выводит:

1
SyntaxError: return not in function

1
SyntaxError: return not in function

1
SyntaxError: return not in function

[Илья Паршаков]

Сергей Сергей, к сожалению не хватает опыта и не могу применить предложенный вами код

[Илья Паршаков]

Merzley, да, но в моем случае блоки создаются динамически, то есть при загрузке страницы изначально блоков вообще нет.

[Merzley]

Сергей Сергей, Кстати, работает. Не знал про такую конструкцию. Надо взять на заметку. Удобнее, чем через find()

[Merzley]

Илья Паршаков, блоки .main есть? Или и они тоже динамически генерируются?

[Илья Паршаков]

Merzley, нету. при нажатии на кнопку создается новый блок .main, в нем есть кнопка при нажатии на которую создается .div

[Merzley]

Илья Паршаков, Вот: https://jsfiddle.net/newne76t/1/
Я правильно понял идею?

[Илья Паршаков]

Merzley, о да, все правильно и работает! Спасибо большое, буду под свою задачу переделывать!

[Merzley]

Пользуйтесь :-) Накидал на скорую руку, без комментариев. Если будет не понятно, что происходит - подскажу.

[Илья Паршаков]

Merzley, и еще раз огромное спасибо! :)

[Илья Паршаков]

Merzley, привет! так и не получилось у меня применить твой пример на своей задумке. Если не затруднит, можешь посмотреть мой пример и подсказать, как сделать https://jsfiddle.net/markovfranc/hr2vkm38/ ?

[Илья Паршаков]

Merzley, запилил новый вопрос, если будет время посмотри пожалуйста https://toster.ru/q/528292

[Merzley]

Илья Паршаков, поправил немного код и попытался в комментариях описать, что вообще происходит https://jsfiddle.net/hr2vkm38/1/. Чтобы глубже вникнуть в такой подход, советую почитать про замыкания и реализацию подобия ООП в JavaScript.

[Илья Паршаков]

Merzley, большое спасибо за ваш труд!

[Илья Паршаков]

Merzley, а если к примеру мы введем еще одну переменную <b>qNum</b>, которая будет считать именно родительские блоки и при клике будет выводиться номер блока - номер в списке например:

1 Добавить
1-1
1-2
1-3
2 Добавить
2-1
2-2
2-3
3 Добавить
3-1
3-2
3-3
3-4
3-5

Пока получается, что qNum изменяется с созданием нового блока и если добавить в первом, то число уже будет увеличенное (номер последнего блока)

[Merzley]

Илья Паршаков, это происходит из-за того, что внутри функции используется глобальная переменная. Если эту переменную изменить, внутри всех замыканий будет использоваться уже новое значение. Чтобы такого избежать нужно эту переменную определить вне функции addQA(), затем перед вызовом addQA() её увеличивать, передавать в addQA() в качестве параметра, а там уже использовать не глобальную переменную, а переданный параметр. Дело в том, что при передаче переменной в функцию, на самом деле передается её копия, которая с оригиналом уже ни как не связана. Поэтому во время работы внутреннего обработчика события будет использоваться эта самая копия со значением, которое было у оригинала во время вызова addQA(). В общем, как-то так

[Илья Паршаков]

Merzley, очень доходчиво! Спасибо! Очень благодарен вам!

Answer 2

[romanu418]

var elems = document.querySelectorAll('.main');
[].forEach.call(elems, function(elem) {
  console.log( elem.children.length );
});

Или так
CSS счетчики

Comments

[Илья Паршаков]

Ваш вариант рабочий и в консоль я получаю правильную нумерацию из разных блоков, правда с ошибкой SyntaxError: return not in function.
Но дело в том, что мне нужно эти значения в виде переменной иметь на странице и выводить или к примеру присваивать атрибуту name=""
Подскажите пожалуйста как это можно сделать?

[Илья Паршаков]

и можно ли подобный код реализовать средствами jquery?

[romanu418]

Илья Паршаков,

var elems = document.querySelectorAll('.main');
var arr = [];
[].forEach.call(elems, function(elem) {
  arr.push( elem.children.length );
});
  console.log(arr);

А для jquery уже сами пробуйте переделать.

[Илья Паршаков]

romanu418, спасибо!