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.

— 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

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

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>

Luaskan cuplikan

— Kamil Kiełczewski
sumber