jQuery การนับองค์ประกอบตามชั้นเรียน - วิธีที่ดีที่สุดในการใช้สิ่งนี้คืออะไร?

373

สิ่งที่ฉันพยายามทำคือการนับองค์ประกอบทั้งหมดในหน้าปัจจุบันด้วยคลาสเดียวกันจากนั้นฉันจะใช้มันเพื่อเพิ่มชื่อลงในแบบฟอร์มอินพุต โดยทั่วไปฉันอนุญาตให้ผู้ใช้คลิก<span>และจากนั้นโดยเพิ่มรายการอื่นสำหรับรายการประเภทเดียวกัน แต่ฉันไม่สามารถคิดวิธีที่จะนับสิ่งเหล่านี้ทั้งหมดด้วย jQuery / JavaScript

ฉันจะตั้งชื่อรายการเป็นสิ่งที่ชอบname="whatever(total+1)"ถ้าใครมีวิธีที่ง่ายในการทำเช่นนี้ฉันจะขอบคุณอย่างยิ่งเพราะ JavaScript ไม่ได้เป็นภาษาพื้นเมืองของฉัน

— 133794m3r
แหล่งที่มา

3

คนแรกที่ฉันได้รับมันและฉันไม่รู้ว่ามันเป็นความยาว $ ('. classname') ที่ง่ายต่อการได้รับ ถ้าฉันมีมากกว่าที่จะให้ฉันจะ ไม่คิดที่จะลองแบบนั้น ฉันได้ตั้งค่าตัวแปรต่างๆแล้วสิ่งที่ง่าย ๆ เช่นการต่อท้ายเอกสาร ฯลฯ ฯลฯ ว้าวฉันรู้สึกโง่มากตอนนี้ฉันน่าจะลองมองหาคำสั่ง. long () เพื่อดูว่ามันพูดอะไร ... ขอบคุณทุกคน BTW

— 133794m3r

26

+1 สำหรับถามคำถามเช่น Yoda

— jbnunn

6

@jbnunn Yoda คืออะไร

— shasi kanth

691

ควรเป็นเช่น:

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

ในฐานะที่เป็นบันทึกด้านข้างมักจะเป็นประโยชน์ในการตรวจสอบคุณสมบัติความยาวก่อนที่จะผูกมัดฟังก์ชั่นจำนวนมากที่เรียกใช้บนวัตถุ jQuery เพื่อให้แน่ใจว่าเรามีงานที่ต้องทำจริง ดูด้านล่าง:

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
แหล่งที่มา

4

แค่อยากจะมีส่วนแบ่งที่ว่านี้ยังทำงานร่วมกับเด็กนับองค์ประกอบเป็นที่สิ่งที่ผมทำเมื่อผมลงจอดที่นี่: children('div.classname').length

— brs14ku

23

การนับจำนวนองค์ประกอบที่อ้างถึงคลาสเดียวกันนั้นง่ายมากเช่นนี้

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

— โจนาธาน
แหล่งที่มา

14

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

— แม็กซ์ Shawabkeh
แหล่งที่มา

9

สำหรับการนับ:

$('.yourClass').length;

ควรทำงานได้ดี

การเก็บในตัวแปรนั้นง่ายเหมือน:

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

— Alastair Pitts
แหล่งที่มา

6

HTML:

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

JavaScript:

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

alert(numItems);

ซอสาธิตสำหรับ div ภายในเท่านั้น

— Nilesh Darade
แหล่งที่มา

2

ลอง

document.getElementsByClassName('myclass').length

แสดงตัวอย่างโค้ด

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>

ขยายตัวอย่างข้อมูล

— Kamil Kiełczewski
แหล่งที่มา