นับองค์ประกอบลูกรองทันทีโดยใช้ jQuery

ฉันมีโครงสร้างโหนด HTML ต่อไปนี้:

<div id="foo">
  <div id="bar"></div>
  <div id="baz">
    <div id="biz"></div>
  </div>
  <span></span>
</div>

ฉันจะนับจำนวนเด็กfooที่อยู่ในประเภทนั้นได้divอย่างไร ในตัวอย่างด้านบนผลลัพธ์ควรเป็นสอง ( barและbaz)

$("#foo > div").length

แนะนำเด็ก ๆ ขององค์ประกอบด้วย id 'foo' ซึ่งเป็น divs จากนั้นเรียกขนาดของชุดที่ผลิตออกมา

ฉันแนะนำให้ใช้$('#foo').children().size()เพื่อประสิทธิภาพที่ดีขึ้น

ฉันได้สร้างการทดสอบjsperfเพื่อดูความแตกต่างความเร็วและchildren()วิธีการเอาชนะตัวเลือกลูก (#foo> div) วิธีการอย่างน้อย60%ใน Chrome (นกขมิ้นสร้าง v15) 20-30%ใน Firefox (v4)

โดยวิธีการที่จำเป็นต้องพูดสองวิธีนี้ให้ผลลัพธ์ที่เหมือนกัน (ในกรณีนี้คือ 1,000)

[อัปเดต] ฉันได้อัปเดตการทดสอบเพื่อรวมขนาด () และการทดสอบความยาวแล้วและพวกเขาก็ไม่ได้สร้างความแตกต่างมากนัก (ผล: lengthการใช้งานเร็วกว่า (2%) เล็กน้อยsize())

[อัปเดต] เนื่องจากมาร์กอัปที่ไม่ถูกต้องที่เห็นใน OP (ก่อนที่จะอัปเดต 'ฉันตรวจสอบความถูกต้องของมาร์กอัป' โดยฉัน) ทั้งสอง$("#foo > div").length& $('#foo').children().lengthส่งผลเหมือนกัน ( jsfiddle ) แต่สำหรับคำตอบที่ถูกต้องเพื่อให้ได้ลูก 'div' เท่านั้นควรใช้ตัวเลือกลูกเพื่อให้ได้ประสิทธิภาพที่ดีขึ้น

$("#foo > div") 

เลือก div ทั้งหมดที่เป็นทายาทของ #foo
ทันทีที่คุณมีชุดลูกคุณสามารถใช้ฟังก์ชันขนาดได้:

$("#foo > div").size()

หรือคุณสามารถใช้

$("#foo > div").length

ทั้งสองอย่างจะให้ผลลัพธ์ที่เหมือนกันแก่คุณ

$('#foo').children('div').length

ในการตอบสนองต่อ mrCoders ตอบโดยใช้ jsperf ทำไมไม่เพียงใช้โหนด dom?

var $foo = $('#foo');
var count = $foo[0].childElementCount

คุณสามารถลองทดสอบได้ที่นี่: http://jsperf.com/jquery-child-ele-size/7

วิธีนี้ได้ 46,095 op / s ในขณะที่วิธีอื่นที่ดีที่สุด 2000 op / s

$('#foo > div').size()

$("#foo > div").length

jQuery มีฟังก์ชั่น. size () ซึ่งจะคืนค่าจำนวนครั้งที่องค์ประกอบปรากฏ แต่ตามที่ระบุไว้ในเอกสารประกอบ jQuery มันจะช้าลงและส่งกลับค่าเดียวกันกับคุณสมบัติความยาวดังนั้นจึงควรใช้ คุณสมบัติความยาว จากที่นี่: http://www.electrictoolbox.com/get-total-number-matched-elements-jquery/

var divss = 0;
$(function(){
   $("#foo div").each(function(){
    divss++;

   });
   console.log(divss);  
});     
<div id="foo">
  <div id="bar" class="1"></div>
  <div id="baz" class="1"></div>
  <div id="bam" class="1"></div>
</div>

กับรุ่นล่าสุดของ jQuery $("#superpics div").children().lengthคุณสามารถใช้

var n_numTabs = $("#superpics div").size();

หรือ

var n_numTabs = $("#superpics div").length;

อย่างที่พูดไปแล้วทั้งคู่ก็กลับผลลัพธ์เหมือนเดิม
แต่ฟังก์ชั่นขนาด () เป็น jQuery "PC" มากกว่า
ฉันมีปัญหาคล้ายกันกับหน้าของฉัน
ในตอนนี้เพียงแค่ละเว้น> และควรจะทำงานได้ดี

$("div", "#superpics").size();

ลองใช้วิธีนี้เพื่อดูองค์ประกอบย่อยของ type div

$("#foo > div")[0].children.length