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.

javascript jquery css element 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

Odpowiedzi:

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

Kamil Kiełczewski
źródło