jQuery: подсчет разных детей с одним и тем же классом в цикле

Question

Давайте предположим, что у меня есть HTML как это:

<div class="somediv"></div> 
<div class="children child1">Text</div>
<div class="children child1">Text</div>
<div class="children child1">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child3">Text</div>
<div class="children child3">Text</div>
<div class="someotherdiv"></div> 

... child 4, child 5 etc. child n;

Как я могу создать jQuery l oop, где я посчитаю, сколько .child1, .child2, .child3,. .. существует?

пс: функция .length (); пока не работает, так что, возможно, давайте найдем альтернативу этому. Кроме того, в DOM будет много других div-ов с несколькими другими классами, которые здесь не должны рассматриваться / затрагиваться (производительность).

Answer 1

Вам не нужно использовать jQuery для этого на самом деле: использование простого JavaScript может легко выполнить работу. Все, что вам нужно, это использовать селектор, который будет применяться к интересующим вас элементам (в данном случае я использовал div, но вы можете использовать, например, .children, чтобы сузить выбор).

Как только вы получили HTMLCollection, вы просто перебираете ее. Для каждого элемента HTML, с которым вы сталкиваетесь, вы перебираете его classList свойство и pu sh им / увеличиваете их соответствующее значение в словаре:

const classDictionary = {};
const els = document.querySelectorAll('div');

Array.from(els).forEach(el => {
  el.classList.forEach(className => {
    if (!(className in classDictionary)) {
      classDictionary[className] = 1;
    } else {
      classDictionary[className]++;
    }
  });
});

console.log(classDictionary);

<div class="children child1">Text</div>
<div class="children child1">Text</div>
<div class="children child1">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child3">Text</div>
<div class="children child3">Text</div>

---

Конечно, если вы действительно должны использовать jQuery, это также вполне возможно:

$(function() {
  const classDictionary = {};
  
  $('div').each(function() {
    this.classList.forEach(className => {
      if (!(className in classDictionary)) {
        classDictionary[className] = 1;
      } else {
        classDictionary[className]++;
      }
    });
  });

  console.log(classDictionary);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="children child1">Text</div>
<div class="children child1">Text</div>
<div class="children child1">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child2">Text</div>
<div class="children child3">Text</div>
<div class="children child3">Text</div>

Answer 2

если вы уже знаете значение n, это способ получить его

n = 5; arr = [];
   for(i = 1; i <= n; i++){
        abc = ".children.child" + i ;
        console.log($(abc).length);
        arr[abc ] = $(abc).length;
   }
  console.log(arr);