Các yếu tố đếm jQuery theo lớp - cách tốt nhất để thực hiện điều này là gì?

373

Những gì tôi đang cố gắng làm là đếm tất cả các thành phần trong trang hiện tại có cùng lớp và sau đó tôi sẽ sử dụng nó để được thêm vào tên cho một biểu mẫu nhập. Về cơ bản, tôi cho phép người dùng nhấp vào một <span>và sau đó bằng cách thêm một mục khác để biết thêm các loại mặt hàng tương tự. Nhưng tôi không thể nghĩ ra cách nào để đếm tất cả những thứ này một cách đơn giản với jQuery / JavaScript.

Sau đó tôi sẽ đặt tên cho vật phẩm đó là một cái gì đó giống như name="whatever(total+1)", nếu bất cứ ai có cách đơn giản để làm điều này tôi sẽ vô cùng biết ơn vì JavaScript không chính xác là ngôn ngữ mẹ đẻ của tôi.

— 133794m3r
nguồn

3

người đầu tiên tôi nhìn thấy đã nhận được nó và tôi không biết đó là một $ ('. classname') đơn giản để có được nó. Nếu tôi có nhiều hơn để cho tôi sẽ. Không nghĩ sẽ thử nó như thế. Tôi đã thiết lập các biến khá nhiều và những thứ đơn giản như nối thêm tài liệu, v.v ... Wow tôi cảm thấy khá ngu ngốc bây giờ tôi đã nghĩ nên tìm lệnh .length () để xem những gì nó nói ... cảm ơn mọi người btw.

— 133794m3r

26

+1 Để đặt câu hỏi như Yoda

— jbnunn

6

@jbnunn Yoda là gì?

— shasi kanth

691

Chỉ nên là một cái gì đó như:

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

Là một lưu ý phụ, thường có ích khi kiểm tra thuộc tính độ dài trước khi xâu chuỗi nhiều hàm gọi trên một đối tượng jQuery, để đảm bảo rằng chúng ta thực sự có một số công việc phải thực hiện. Xem bên dưới:

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
nguồn

4

Chỉ muốn chia sẻ rằng điều này cũng hoạt động với việc đếm trẻ em của một yếu tố, vì đó là những gì tôi đã làm khi tôi hạ cánh ở đây: children('div.classname').length

— brs14ku

23

Việc đếm số lượng phần tử tham chiếu đến cùng một lớp là đơn giản như thế này

<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
nguồn

14

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

— Khăn choàng tối đa
nguồn

9

để đếm:

$('.yourClass').length;

nên làm việc tốt

lưu trữ trong một biến dễ dàng như:

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

— Alastair Forge
nguồn

6

HTML:

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

JavaScript:

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

alert(numItems);

Fiddle demo cho chỉ div bên trong

— Nilesh Darade
nguồn

2

thử

document.getElementsByClassName('myclass').length

Hiển thị đoạn mã

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>

Mở rộng đoạn trích

— Kamil Kiełczewski
nguồn