jQuery contando elementos por classe - qual é a melhor maneira de implementar isso?

373

O que estou tentando fazer é contar todos os elementos da página atual com a mesma classe e depois vou usá-lo para ser adicionado ao nome de um formulário de entrada. Basicamente, estou permitindo que os usuários cliquem em um <span>e, em seguida, adicionando outro para obter mais do mesmo tipo de itens. Mas não consigo pensar em uma maneira de contar tudo isso simplesmente com jQuery / JavaScript.

Eu ia então nomear o item como algo como name="whatever(total+1)", se alguém tiver uma maneira simples de fazer isso, ficaria extremamente grato porque o JavaScript não é exatamente a minha língua nativa.

javascript jquery css element 133794m3r
fonte
3
a primeira pessoa que vi conseguiu e eu não sabia que era um simples $ ('. classname'). comprimento para obtê-lo. Se eu tivesse mais para dar, eu daria. Não pensou em tentar assim. Estou definindo variáveis ​​bastante e coisas simples, como anexar documentos etc. btw.
133794m3r
26
+1 Para fazer uma pergunta como Yoda
jbnunn
6
@jbnunn o que é o Yoda?
Shasi kanth

Respostas:

691

Deve ser apenas algo como:

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



Como observação lateral, geralmente é benéfico verificar a propriedade length antes de encadear muitas chamadas de funções em um objeto jQuery, para garantir que realmente tenhamos algum trabalho a executar. Ver abaixo:

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
fonte
4
Só queria compartilhar que isso também trabalha com crianças de contagem de um elemento, como é o que eu estava fazendo quando cheguei aqui: children('div.classname').length
brs14ku
23

Obter uma contagem do número de elementos que se referem à mesma classe é tão simples quanto isso

<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
fonte
14 
var count = $('.' + myclassname).length;
Max Shawabkeh
fonte
9

para contar:

$('.yourClass').length;

deve funcionar bem.

armazenar em uma variável é tão fácil quanto:

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

Alastair Pitts
fonte
2

tentar

document.getElementsByClassName('myclass').length

Mostrar snippet de código

Kamil Kiełczewski
fonte