Sınıflara göre jQuery sayma elemanları - bunu uygulamanın en iyi yolu nedir?

373

Ne yapmaya çalışıyorum aynı sınıf ile geçerli sayfadaki tüm öğeleri saymak ve daha sonra bir giriş formu için bir ad eklemek için kullanacağım. Temelde kullanıcıların bir tıklamasına izin veriyorum <span>ve daha sonra aynı türden daha fazla öğe için başka bir tane daha ekleyerek. Ancak tüm bunları sadece jQuery / JavaScript ile saymanın bir yolunu düşünemiyorum.

Daha sonra öğeyi böyle bir şey olarak adlandıracaktım name="whatever(total+1)", eğer herkes bunu yapmanın basit bir yoluna sahipse, JavaScript tam olarak benim ana dilim olmadığından çok minnettar olurum.

— 133794m3r
kaynak

3

gördüğüm ilk kişi anladım ve basit bir $ ('. classname') olduğunu bilmiyordum. Eğer vermek için daha fazla olsaydı yapardım. Böyle denemeyi düşünmemiştim. Değişkenleri belge ekleme gibi oldukça basit ve basit şeyler ayarlıyorum vb. Vay. Şimdi oldukça aptal hissediyorum. Ne dediğini görmek için .length () komutunu aramayı düşünmeliydim ... btw.

— 07:42

26

+1 Yoda

— jbnunn

6

@jbnunn Yoda nedir?

— shasi kanth

691

Sadece şöyle bir şey olmalı:

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

Bir yan not olarak, bir jQuery nesnesine çok sayıda işlev çağrısı yapmadan önce, aslında gerçekleştirmek için biraz çalışmamız olduğundan emin olmak için length özelliğini kontrol etmek genellikle yararlıdır. Aşağıya bakınız:

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
kaynak

4

Sadece bunun bir elementin çocuklarını saymakla da işe yaradığını paylaşmak istedim, çünkü buraya children('div.classname').length

— indiğimde

23

Aynı sınıfa gönderme yapan öğelerin sayısını saymak bu kadar basit

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

14

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

— Max Shawabkeh
kaynak

9

saymak için:

$('.yourClass').length;

iyi çalışmalı.

bir değişkende saklamak şu kadar kolaydır:

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

— Alastair Pitts
kaynak

6

HTML:

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

JavaScript:

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

alert(numItems);

Sadece div için keman demosu

— Nilesh Darade
kaynak

2

Deneyin

document.getElementsByClassName('myclass').length

Kod snippet'ini göster

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>

Snippet'i genişlet

— Kamil Kiełczewski
kaynak