jQuery підрахунок елементів за класом - який найкращий спосіб реалізувати це?

373

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

Тоді я збирався назвати цей предмет як щось подібне name="whatever(total+1)", якщо у когось є простий спосіб зробити це, я був би дуже вдячний, оскільки JavaScript не є точно моєю рідною мовою.

— 133794м3р
джерело

3

Перша людина, яку я побачив, отримала його, і я не знала, що це проста $ ('. classname') довжина, щоб отримати її. Якби я мав більше дати, я б хотів. Не думав спробувати це так. Я встановлював змінні зовсім небагато і простих речей, таких як додавання документів і т.д. btw.

— 133794m3r

26

+1 За запитання, як-от Yoda

— 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;

— Аластер Піттс
джерело

6

HTML:

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

JavaScript:

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

alert(numItems);

Демо-скрипт лише для діва всередині

— Нілеш Дараде
джерело

2

спробуйте

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>

Розгорніть фрагмент

— Каміль Київчевський
джерело