حساب عناصر div الفرعية المباشرة باستخدام jQuery

Question

لدي بنية عقدة HTML التالية:

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

كيف أحسب عدد الأبناء المباشرين foo, ، وهي من النوع div؟في المثال أعلاه، يجب أن تكون النتيجة اثنين (bar و baz).

Answer 1

$("#foo > div").length

والأطفال المباشر للعنصر مع 'فو' الهوية التي هي عناصر div. ثم استرجاع حجم مجموعة ملفوفة المنتجة.

Answer 2

وأوصي باستخدام $('#foo').children().size() من أجل أداء أفضل.

ولقد خلق jsperf اختبار لمعرفة الفرق سرعة وطريقة children() ضرب محدد الطفل ( #foo> نهج شعبة) من قبل ما لا يقل عن <قوية> 60٪ في كروم (الكناري بناء V15) على 20-30٪ في فايرفوكس (V4).

وبالمناسبة، وغني عن القول، هذين النهجين تنتج نفس النتائج (في هذه الحالة، 1000).

و[تحديث] لقد تحديث الاختبار لتضمين حجم () مقابل اختبار طول، وأنها لا يغير من الأمر كثيرا (نتيجة: استخدام length أسرع قليلا (2٪) من size())

[تحديث] نظرا لعلامات غير صحيحة ينظر في OP (قبل "توصيف التحقق من صحة" التحديث عن طريق لي)، وكلاهما $("#foo > div").length و$('#foo').children().length أدى نفسه (<لأ href = "http://jsfiddle.net/ LavMc / "> jsfiddle ). ولكن لالإجابة الصحيحة فقط للحصول على "شعبة" الأطفال، ينبغي للمرء أن استخدام محدد للطفل الصحيح وتحسين الأداء

Answer 3

$("#foo > div") 

وتحديد كافة عناصر div التي ينحدرون الفورية لل#foo
مرة واحدة لديك مجموعة من الأطفال يمكنك إما استخدام وظيفة حجم:

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

وأو يمكنك استخدام

$("#foo > div").length

وكلا سيعود لك نفس النتيجة

Answer 4

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

Answer 5

وردا على mrCoders الإجابة باستخدام jsperf لماذا لا تستخدم فقط عقدة دوم؟

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

ويمكنك أن تجرب اختبار هنا: http://jsperf.com/jquery-child -ele الحجم / 7

وهذه الطريقة يحصل على 46095 المرجع / ثانية في حين أن الطرق الأخرى في أفضل 2000 المرجع / ق

Answer 6

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

Answer 7

$("#foo > div").length

ومسج لديه وظيفة. الحجم () الذي سيعود عدد المرات التي يظهر عنصر، ولكن كما هو محدد في وثائق مسج، فمن أبطأ وترجع نفس قيمة الممتلكات. طول لذلك فمن الأفضل ببساطة استخدام الخاصية. طول. من هنا: http://www.electrictoolbox.com/get-total ، عدد المطابقة-عناصر مسج /

Answer 8

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>

Answer 9

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

أو

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

---

وكما قلنا من قبل، كلاهما يعودان بنفس النتيجة.
لكن وظيفة size() هي أكثر jQuery "P.C".
واجهت مشكلة مماثلة مع صفحتي.
في الوقت الحالي، فقط قم بحذف > وسيعمل بشكل جيد.

Answer 10

ومع أحدث إصدار من مسج، يمكنك استخدام $("#superpics div").children().length.

Answer 11

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