jQuery подсчет элементов по классам - каков наилучший способ реализовать это?

373

Я пытаюсь подсчитать все элементы на текущей странице с одним и тем же классом, а затем я собираюсь использовать его для добавления к имени для формы ввода. По сути, я позволяю пользователям нажимать на значок, <span>а затем добавляя еще один для большего количества элементов того же типа. Но я не могу придумать способ подсчитать все это просто с помощью jQuery / JavaScript.

Я собирался назвать этот элемент как-то так name="whatever(total+1)": если у кого-то есть простой способ сделать это, я был бы чрезвычайно благодарен, поскольку JavaScript не совсем мой родной язык.

javascript jquery css element 133794m3r
источник
3
первый человек, которого я увидел, получил его, и я не знал, что это простая $ ('. classname'). длина, чтобы его получить. Если бы у меня было больше, я бы дал. Не думал попробовать это так. Я устанавливал переменные совсем немного и такие простые вещи, как добавление документов и т. Д. Вау, я чувствую себя довольно глупо, теперь мне следовало бы поискать команду .length (), чтобы увидеть, что она говорит ... спасибо всем кстати.
133794m3r
26
+1 За вопрос типа Йода
jbnunn
6
@jbnunn что такое Йода?
Шаси Кант

Ответы:

691

Должно быть что-то вроде:

// Gets the number of elements with class yourClass
var numItems = $('.yourclass').length



Как примечание, часто полезно проверять свойство длины, прежде чем связывать много вызовов функций в объекте jQuery, чтобы убедиться, что у нас действительно есть какая-то работа. См. ниже:

var $items = $('.myclass');
// Ensure we have at least one element in $items before setting up animations
// and other resource intensive tasks.
if($items.length)
{
  $items.animate(/* */)
    // It might also be appropriate to check that we have 2 or more
    // elements returned by the filter-call before animating this subset of 
    // items.
    .filter(':odd')
      .animate(/* */)
      .end()
    .promise()
    .then(function () { 
       $items.addClass('all-done');
    });
}
PatrikAkerstrand
источник
4
Просто хотел поделиться, что это также работает с подсчетом дочерних элементов, так как это то, что я делал, когда приземлился здесь: children('div.classname').length
brs14ku
23

Получить количество элементов, относящихся к одному и тому же классу, очень просто.

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">

            $(document).ready(function() {
                alert( $(".red").length );
            });

        </script>
    </head>
    <body>

        <p class="red">Test</p>
        <p class="red">Test</p>
        <p class="red anotherclass">Test</p>
        <p class="red">Test</p>
        <p class="red">Test</p>
        <p class="red anotherclass">Test</p>
    </body>
</html>
Джонатан
источник
14 
var count = $('.' + myclassname).length;
Макс Шавабке
источник
9

для подсчета:

$('.yourClass').length;

должно работать нормально.

хранение в переменной так же просто, как:

var count = $('.yourClass').length;

Аластер Питтс
источник
2

пытаться

document.getElementsByClassName('myclass').length

Показать фрагмент кода

Камил Келчевски
источник