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

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

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


javascript jquery css element
person 133794m3r    schedule 28.04.2010    source источник
comment
первый человек, которого я увидел, получил его, и я не знал, что это была простая длина $ ('. classname')., чтобы получить его. Если бы у меня было больше, я бы дал. Не думал попробовать вот так. Я довольно часто устанавливал переменные и простые вещи, такие как добавление документов и т.д. Кстати.   -  person 133794m3r    schedule 28.04.2010
comment
+1 За то, что задал такой вопрос, как Йода   -  person jbnunn    schedule 07.03.2012
comment
@jbnunn что такое Йода?   -  person shasi kanth    schedule 30.10.2014

Ответы (5)


arrow_upward
747
arrow_downward

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

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



В качестве примечания: часто бывает полезно проверить свойство 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');
    });
}
person PatrikAkerstrand    schedule 28.04.2010
comment
Просто хотел поделиться, что это также работает с подсчетом дочерних элементов элемента, как это то, что я делал, когда приземлился здесь: children('div.classname').length - person brs14ku; 21.05.2014

arrow_upward
23
arrow_downward

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

<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>
person Jonathan    schedule 28.04.2010

arrow_upward
9
arrow_downward

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

$('.yourClass').length;

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

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

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

person Alastair Pitts    schedule 28.04.2010

arrow_upward
6
arrow_downward

HTML:

<div>
    <img src='' class='class' />
    <img src='' class='class' />
    <img src='' class='class' />
</div>

JavaScript:

var numItems = $('.class').length; 
        
alert(numItems);

Демо скрипта только для внутреннего div

person Nilesh Darade    schedule 22.08.2014

arrow_upward
4
arrow_downward

пытаться

document.getElementsByClassName('myclass').length


let num = document.getElementsByClassName('myclass').length;
console.log('Total "myclass" elements: '+num);
.myclass { color: red }
<span class="myclass" >1</span>
<span>2</span>
<span class="myclass">3</span>
<span class="myclass">4</span>

person Kamil Kiełczewski    schedule 25.04.2019