jQuery menghitung elemen berdasarkan kelas - apa cara terbaik untuk mengimplementasikan ini?

373

Apa yang saya coba lakukan adalah menghitung semua elemen di halaman saat ini dengan kelas yang sama dan kemudian saya akan menggunakannya untuk ditambahkan ke nama untuk formulir input. Pada dasarnya saya mengizinkan pengguna untuk mengklik <span>dan kemudian dengan menambahkan satu lagi untuk lebih dari jenis barang yang sama. Tapi saya tidak bisa memikirkan cara untuk menghitung semua ini hanya dengan jQuery / JavaScript.

Saya akan menamai item tersebut dengan sesuatu seperti name="whatever(total+1)", jika ada yang punya cara sederhana untuk melakukan ini, saya akan sangat berterima kasih karena JavaScript bukan bahasa ibu saya.

javascript jquery css element 133794m3r
sumber
3
orang pertama yang saya lihat mendapatkannya dan saya tidak tahu itu adalah $ ('. classname') yang sederhana. Panjang untuk mendapatkannya. Jika saya memiliki lebih banyak untuk diberikan, saya akan. Tidak terpikir untuk mencobanya seperti itu. Saya telah menetapkan variabel sedikit dan hal-hal sederhana seperti menambahkan dokumen dll. btw.
133794m3r
26
+1 Untuk mengajukan pertanyaan seperti Yoda
jbnunn
6
@ jbnunn apa itu Yoda?
shasi kanth

Jawaban:

691

Seharusnya sesuatu seperti:

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



Sebagai catatan tambahan, seringkali bermanfaat untuk memeriksa properti panjang sebelum merantai banyak fungsi panggilan pada objek jQuery, untuk memastikan bahwa kami benar-benar memiliki beberapa pekerjaan yang harus dilakukan. Lihat di bawah:

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
sumber
4
Hanya ingin berbagi bahwa ini juga berfungsi dengan menghitung anak-anak dari suatu unsur, karena itulah yang saya lakukan ketika saya mendarat di sini: children('div.classname').length
brs14ku
23

Mendapatkan hitungan jumlah elemen yang merujuk ke kelas yang sama sesederhana ini

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

untuk menghitung:

$('.yourClass').length;

harus bekerja dengan baik.

menyimpan dalam variabel semudah:

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

Alastair Pitts
sumber
6

HTML:

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

JavaScript:

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

alert(numItems);

Demo biola untuk di dalam hanya div

Nilesh Darade
sumber
2

mencoba

document.getElementsByClassName('myclass').length

Tampilkan cuplikan kode

Kamil Kiełczewski
sumber