JQuery का उपयोग करके तत्काल बाल div तत्वों की गणना करें

Question

मेरे पास निम्न HTML नोड संरचना है:

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

मैं तत्काल बच्चों की संख्या कैसे गिनूं foo, जो कि प्रकार के हैं div? उपरोक्त उदाहरण में, परिणाम दो ( barऔर baz) होना चाहिए ।

Comments

मैंने विभिन्न दृष्टिकोणों के बीच गति अंतर को देखने के लिए एक jsperf परीक्षण जोड़ा है। मेरा जवाब नीचे देखें

— मणिकंता

Answer 1

$("#foo > div").length

तत्व के प्रत्यक्ष बच्चे आईडी 'फू' के साथ होते हैं जो divs हैं। फिर उत्पादित लिपटे सेट के आकार को पुनः प्राप्त करना।

Comments

मैं सिर्फ शुक्रवार को सोच रहा था कि jQuery के साथ टेबल कॉलम कैसे गिनें। मैं एक समान दृष्टिकोण की कोशिश करनी होगी $('#table > th').size():।

— जिम शूबर्ट

कभी-कभी यह काम नहीं करता है और आपको $ ('# foo') का उपयोग करना पड़ता है। बच्चे () (आकार) () जो कि वैसे भी @mrCoder के अनुसार तेज है

— 472084

अगर मैं #foo के बजाय इसका उपयोग करना चाहता हूं। तो इसका उपयोग कैसे करें?

— मुकेश

@ ४ do२० you४ यदि आप इसे इस तरह से करते हैं, तो यह "स्पान" तत्व को भी गिनता है। ध्यान दें कि प्रश्न निर्दिष्ट करता है कि वह केवल "div" तत्वों को गिनना चाहता है, सभी तत्वों को नहीं।

— एंजेल ब्लैंको

Answer 2

मैं $('#foo').children().size()बेहतर प्रदर्शन के लिए उपयोग करने की सलाह देता हूं ।

मैंने गति अंतर को देखने के लिए jsperf परीक्षण बनाया है और children()विधि ने चयनकर्ता (#foo> div) को क्रोम में कम से कम 60% ( फ़ायरफ़ॉक्स में कैनरी बिल्ड v15) 20-30% (v4) से हराया ।

वैसे, कहने की जरूरत नहीं है, ये दोनों दृष्टिकोण एक ही परिणाम (इस मामले में, 1000) का उत्पादन करते हैं।

[अद्यतन] मैंने आकार () बनाम लंबाई परीक्षण शामिल करने के लिए परीक्षण को अद्यतन किया है, और वे बहुत अंतर नहीं करते हैं (परिणाम: lengthउपयोग की तुलना में थोड़ा तेज है (२%) size())

[अपडेट] कारण गलत मार्कअप ओपी में देखा करने के लिए ( 'मार्कअप मान्य' मेरे द्वारा अद्यतन से पहले), दोनों $("#foo > div").lengthऔर $('#foo').children().lengthपरिणामस्वरूप एक ही ( jsfiddle )। लेकिन केवल 'div' बच्चों को प्राप्त करने के लिए सही उत्तर के लिए, एक SHOULD सही और बेहतर प्रदर्शन के लिए बच्चे के चयनकर्ता का उपयोग करता है

Comments

हालांकि यह सवाल कुछ समय पहले पूछा गया था, बस इतना साझा करना चाहता था ताकि यह अब से किसी की मदद कर सके

— manikanta

वहां केवल 'div' बच्चों को फ़िल्टर करना कहाँ है?

— एंड्री टर्सकस

.lengthवास्तव में पसंदीदा तरीका है क्योंकि इसमें फ़ंक्शन कॉल का ओवरहेड नहीं है।

— निक ऐच

हां, बच्चे का चयनकर्ता सही है क्योंकि यह देशी सीएसएस चयनकर्ताओं का उपयोग करता है, इसलिए चयन जावास्क्रिप्ट के बजाय C ++ में लिखा गया है ... एक प्रदर्शन अंतर काफी। यह उत्तर समझने में आसान है लेकिन बहुत धीमा है।

— mdenton8

@manikanta हे, बहुत विस्तृत anser। परेशान करने के लिए क्षमा करें, एक प्रश्न। अगर मुझे $('#extraLinks').children().size()एक डिव में टेक्स्ट बॉक्स गिनना पसंद है (एक्सट्रालिंक्स नाम से) तो मुझे क्यों मिलता है 4जब वे केवल 2 होते हैं। सामान्य तौर पर, मुझे लंबाई 2 से गुणा होती है ... कोई भी विचार क्यों? धन्यवाद

— Slevin

Answer 3

$("#foo > div") 

सभी divs का चयन करता है जो #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-size/7

यह विधि 46,095 से अधिक / सेकंड हो जाती है, जबकि अन्य तरीके सर्वश्रेष्ठ 2000 ऑप्स / एस पर

Comments

ओपी ने केवल div बाल तत्वों के लिए कहा

— dj18

Answer 6

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

Answer 7

$("#foo > div").length

jQuery का एक .size () फ़ंक्शन है जो एक तत्व के प्रकट होने के समय की संख्या को लौटाएगा लेकिन, जैसा कि jQuery प्रलेखन में निर्दिष्ट है, यह धीमा है और .length संपत्ति के समान मान लौटाता है इसलिए इसे केवल उपयोग करना सबसे अच्छा है। लंबाई संपत्ति। यहाँ से: http://www.electrictoolbox.com/get-total-number-matched-elements-jquery/

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

जेकरी के सबसे हाल के संस्करण के साथ, आप उपयोग कर सकते हैं $("#superpics div").children().length।

Answer 10

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

या

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

---

जैसा कि पहले ही कहा गया था, दोनों एक ही परिणाम देते हैं।
लेकिन आकार () फ़ंक्शन अधिक jQuery "पीसी" है।
मेरे पेज के साथ भी मुझे ऐसी ही समस्या थी।
अभी के लिए, बस> को छोड़ दें और इसे ठीक काम करना चाहिए।

Comments

वंशज चयनकर्ता बच्चे, नाती-पोते, परदादा और # तत्व के # संतानों के सभी वंशजों को वापस कर देगा, न कि तत्कालीन बच्चों का, न सिर्फ तात्कालिक बच्चों का

— मणिकंता

अधिक jQuery के "पीसी"। माध्यम ?

— घनश्याम लखानी

Answer 11

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

Comments

जो बच्चों को ही नहीं, सभी div वंशजों को भी गिनता है ।

— फेलिक्स क्लिंग ने

Answer 12

टाइप डिव के तत्काल बाल तत्वों के लिए यह प्रयास करें

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