2012-04-11 18 views
16

मैंने jQuery का उपयोग करके पहले बच्चे तत्व का चयन करने के सबसे तेज़ तरीके से चर्चा की है। जैसा कि उम्मीद की जा सकती है, मूल डीओएम पहले चाइल्ड संपत्ति एक jQuery चयनकर्ता या चयनकर्ताओं के संयोजन का उपयोग करने से बहुत तेज है - http://jsperf.com/jquery-first-child-selection-performance/6 देखें। यह आम तौर पर एक समस्या नहीं है - या तो इसका उपयोग ऐसे स्थान पर किया जा रहा है जहां प्रदर्शन एक बड़ा सौदा नहीं है, या केवल डीओएम तत्व तक पहुंचने के लिए पर्याप्त है और इसका उपयोग करें। फर्स्ट चाइल्ड प्रॉपर्टी। हालांकि, इस के साथ एक जोड़ी समस्याएं हैं:jQuery क्यों .firstChild विधि प्रदान नहीं करता है?

  • firstChild बल्कि एक तत्व की तुलना में एक पाठ या टिप्पणी नोड लौटा सकता है, के रूप में एक jQuery चयनकर्ता
  • वापसी होगी मैं कई तत्वों के पहले बच्चे का चयन करने की जरूरत है , मुझे या तो धीमी चयनकर्ता का उपयोग करना चाहिए, या डीओएम तत्वों पर पुनरावृत्त करने वाले बहुत से अतिरिक्त काम पर जाना चाहिए, उन्हें एक संग्रह में जोड़ना, फिर उन्हें एक jQuery ऑब्जेक्ट में वापस रखना।

ऐसा लगता है कि कोर jQuery लाइब्रेरी में पहली चाइल्ड विधि जोड़ने की लागत लाभ से बहुत छोटी होगी। मैं अपने खुद के इस्तेमाल के लिए इस तरह के एक विधि बनाने पर मेरे अपने शॉट ले लिया:

$.fn.firstChild = function() { 
    var ret = []; 

    this.each(function() { 
     var el = this.firstChild; 

     //the DOM firstChild property could return a text node or comment instead of an element 
     while (el && el.nodeType != 1) 
      el = el.nextSibling; 

     if (el) ret.push(el); 
    }); 

    //maintain jQuery chaining and end() functionality 
    return this.pushStack(ret); 
}; 

परीक्षण मैं http://jsperf.com/jquery-multiple-first-child-selection पर बनाया में, इस समारोह पांच बार से अधिक किसी भी अन्य विकल्प की तुलना में तेजी प्रदर्शन करती है। परीक्षण ऊपर वर्णित परीक्षणों पर आधारित हैं, लेकिन एक तत्व के बजाय, एकाधिक तत्वों के पहले बच्चों का चयन कर रहे हैं।

क्या मुझे कुछ याद आ रही है? एक तकनीक जो मुझे उपयोग करनी चाहिए? या क्या यह एक मुद्दा है जिसके बारे में कभी चिंता नहीं करनी चाहिए? क्या jQuery में इस तरह के फ़ंक्शन को शामिल करने का कोई कारण नहीं है?

उत्तर

12

"jQuery क्यों नहीं करता है। फर्स्ट चाइल्ड विधि?"

फ़ीचर रेंगना, सबसे अधिक संभावना है।

यह आपके द्वारा बताए गए अन्य तरीकों से पूरा किया जा सकता है, और यदि प्रदर्शन एक चिंता है, तो आप उस विशिष्ट आवश्यकता के लिए jQuery का विस्तार कर सकते हैं जैसा आपने किया है।


आप अपने कोड थोड़ा और अधिक में प्रदर्शन में सुधार कर सकते हैं ...

$.fn.firstChild = function() { 
    var ret = []; 
    // use a for loop 
    for (var i = 0, len = this.length; i < len; i++) { 
     var this_el = this[i], 
      el = this_el.firstElementChild; // try firstElementChild first 
     if (!el) { 
      el = this_el.firstChild; 
      while (el && el.nodeType != 1) 
       el = el.nextSibling; 
     } 
     if (el) ret.push(el); 
    } 
    //maintain jQuery chaining and end() functionality 
    return this.pushStack(ret); 
}; 
+2

+1, मुझे firstElementChild के बारे में पता नहीं था। उत्सुकता के लिए, मुझे यहां एक ब्राउज़र समर्थन चार्ट मिला: http://www.quirksmode.org/dom/w3c_traversal.html – undefined

+1

मुझे यह भी उल्लेख करना चाहिए कि मैंने ऊपर जुड़े जेएसपीआरएफ परीक्षण मामलों में उन्नत प्रथम चाइल्ड फ़ंक्शन जोड़ा है। – undefined

+0

लोग आपके कारण पागल हो गए ... :) [यह] जांचें (http://meta.stackexchange.com/q/129306/173320) बाहर। – gdoron

0

एक तत्व के मामलों के लिए आप

$('.test > eq(0)') 

जो लगभग में तुम्हारा मैच के लिए उपयोग कर सकते हैं लगता है गति ..

http://jsperf.com/jquery-multiple-first-child-selection/2

+2

यह तेज़ है क्योंकि यह एक अमान्य चयनकर्ता है, इसलिए यह वास्तव में कोई भी डोम चयन नहीं कर रहा है।वैध चयनकर्ता ': eq (0)' है, जो Sizzle के लिए विशिष्ट है, और धीमा हो जाएगा, विशेष रूप से उस पर विचार करने से पहले किसी भी अन्य चयनकर्ता के बिना, आप प्रभावी ढंग से '*: eq (0)' कर रहे हैं, जो डोम में सभी तत्वों का चयन करेगा, देखें कि वे इंडेक्स '0' पर हैं, फिर देखें कि उनके माता-पिता के पास' .test' है या नहीं। –

+1

@amnotiam lol .. अरे मुझे याद आया ... और मैंने सोचा कि मैं कुछ पर था और इस पर सुधार करने की कोशिश कर रहा था ... * चकले *। सर उठाने के लिए धन्यवाद। –

+0

आपका स्वागत है। :) –

संबंधित मुद्दे