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.

— 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

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

6

HTML:

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

JavaScript:

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

alert(numItems);

Demonstração do Fiddle para dentro apenas de div

— Nilesh Darade
fonte

2

tentar

document.getElementsByClassName('myclass').length

Mostrar snippet de código

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>

Expandir snippet

— Kamil Kiełczewski
fonte