jQuery zliczanie elementów według klas - jaki jest najlepszy sposób na to?

373

Próbuję zliczyć wszystkie elementy na bieżącej stronie z tą samą klasą, a następnie użyję go, aby dodać go do nazwy formularza wejściowego. Zasadniczo zezwalam użytkownikom na klikanie, <span>a następnie dodawanie kolejnych, aby uzyskać więcej tego samego rodzaju elementów. Ale nie mogę wymyślić sposobu, aby policzyć je wszystkie po prostu za pomocą jQuery / JavaScript.

Chciałem wtedy nazwać ten przedmiot czymś w rodzaju name="whatever(total+1)", jeśli ktoś ma prosty sposób, by to zrobić, byłbym bardzo wdzięczny, ponieważ JavaScript nie jest moim ojczystym językiem.

— 133794m3r
źródło

3

pierwsza osoba, którą zobaczyłem, dostało to i nie wiedziałem, że jest to prosta długość $ ('. classname'). Gdybym miał więcej do zaoferowania, dałbym. Nie pomyślałem, żeby spróbować w ten sposób. Ustawiłem trochę zmienne i proste rzeczy, takie jak dołączanie dokumentów itp. Wow, czuję się teraz dość głupi, powinienem pomyśleć, aby poszukać polecenia .length (), aby zobaczyć, co napisano ... dzięki wszystkim btw.

— 133794m3r

26

+1 Za zadawanie pytań takich jak Yoda

— jbnunn

6

@jbnunn co to jest Yoda?

— shasi kanth

691

Powinno być po prostu coś takiego:

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

Na marginesie, często korzystne jest sprawdzenie właściwości length przed połączeniem wielu wywołań funkcji w obiekcie jQuery, aby upewnić się, że rzeczywiście mamy trochę pracy do wykonania. Patrz poniżej:

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
źródło

4

Chciałem tylko powiedzieć, że działa to również z liczeniem dzieci elementu, ponieważ właśnie to robiłem, kiedy tu wylądowałem: children('div.classname').length

— brs14ku

23

Uzyskanie liczby elementów odnoszących się do tej samej klasy jest tak proste, jak to

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

— Jonathan
źródło

14

var count = $('.' + myclassname).length;

— Max Shawabkeh
źródło

9

do liczenia:

$('.yourClass').length;

powinien działać dobrze.

przechowywanie w zmiennej jest tak proste jak:

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

— Alastair Pitts
źródło

6

HTML:

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

JavaScript:

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

alert(numItems);

Demo skrzypce dla div wewnątrz tylko

— Nilesh Darade
źródło

2

próbować

document.getElementsByClassName('myclass').length

Pokaż fragment kodu

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>

Rozwiń fragment kodu

— Kamil Kiełczewski
źródło