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

Question

[Gagatyn]

Не могу подсчитать элементы с одним классом на javascript. Пробовал тут. Нужно вывести: с таким классом [.className]: [количество элементов]. Подскажите, только код попроще, я только учу javascript.

Comments

[Александр Лысенко]

Честно говоря в интернете много понятных примером, остается только подпилить их под вашу задачу.

Answer 1

[Леонид Князев]

На скорую руку как-то так.

Answer 2

[Петр]

var elms = document.querySelectorAll('.className');
elms.lenght;

Comments

[Gagatyn]

Петр ведь ваш пример нужно прописывать столько раз, сколько и классов? Неизвестно же сколько их, и какие они, а если не 10 и не 15, а больше? Я пытался сделать циклом, пытался короче сделать код, в этом проблема.

Answer 3

[Алексей Скляров]

Не знаю точно или нет, но говорят что в гугле можно найти почти любую информацию: https://www.google.ru/search?q=get+number+of+class...

На заметку: если что-то нельзя найти в ру-сегменте, гуглите в англ. сегменте - шансы возрастут.

Comments

[Gagatyn]

Алексей Скляров В том то и дело, что я не писал тег jquery
Конечно вы правы насчет англо сегмента, но это тоже нужно уметь :)

Answer 4

[licvis]

<div class="class1">Element 1</div>
    <div class="class2">Element 2</div>
    <div class="class1">Element 3</div>
    <div class="class3">Element 4</div>
    <div class="class2">Element 5</div>
    
    <p id="result"></p>

// An array of class names you want to count
        var classNamesToCount = ['class1', 'class2', 'class3'];

        var classCounts = {}; // Object to store class counts

        classNamesToCount.forEach(function(className) {
            var elementsWithClass = document.getElementsByClassName(className);
            classCounts[className] = elementsWithClass.length;
        });

        // Display the counts
        var resultText = "Number of elements with different classes:\n";
        for (var className in classCounts) {
            resultText += "'" + className + "': " + classCounts[className] + "\n";
        }

        document.getElementById("result").textContent = resultText;