अभिभावक(), तेज़ विकल्प?

Question

मैं divs के डैशबोर्ड के साथ काम कर रहा हूं और प्रत्येक div में इसका एक पेड़ है जिसमें बटन हैं। हर बार मुझे पता होना चाहिए कि उस div की आईडी कौन है इसलिए मैं अभिभावक() बहुत कुछ उपयोग कर रहा हूं।

अधिकतर मैं div की आईडी खोजने के लिए $(this).parent().parent().parent() कर रहा हूं इसलिए मैं इसे चर सेट कर सकता हूं। ऐप प्रत्येक div के आईडी पर आधारित है।

क्या यह माता-पिता() तक 3 बार तक धीमा मानता है लेकिन हर समारोह पर बहुत अधिक है?

क्या कोई अन्य विकल्प है?

मैं कुछ ऐसे बेंचमार्क-स्टाइल की तलाश में हूं जो दिखाता है कि तेज़ क्या है। , $(this).closest('.dashdiv')

यह देखने का एक इंजन के दृष्टिकोण से किसी भी तेजी से नहीं है, क्योंकि आप कर रहे हैं:

<div id="6179827893" class="dashdiv"> 
    <div class="buttons"> 
    <li><a href="#" class="btn1">Button 1</a></li> 
    <li><a href="#" class="btn2">Button 2</a></li> 
    <li><a href="#" class="btn3">Button 3</a></li> 
    <li><a href="#" class="btn4">Button 4</a></li> 
    <li><a href="#" class="btn5">Button 5</a></li> 
    <li><a href="#" class="btn6">Button 6</a></li> 
    </div> 
    <div class="dashcontent"> 

    .... 

    </div> 
</div> 

Answer 1

आपके पास एक ही प्रभाव प्राप्त करने के लिए कुछ विकल्प हैं।

बेंचमार्क: http://jsperf.com/parents-method। इस बेंचमार्क के अनुसार, मेरी विधि आपकी विधि से लगभग 100x तेज है।

Method (see below) : Operations per second (higher is better) 
parentNode3x  : 4447k 
$(parentNode3x) : 204K 
$().closest  : 35k 
$().parents  : 9k 
$().parent()3x  : 44k 

// Likely the fastest way, because no overhead of jQuery is involved. 
var id = this.parentNode.parentNode.parentNode.id; 

// Alternative methods to select the 3rd parent: 
$(this.parentNode.parentNode.parentNode) // Native DOM, wrapped in jQuery 

// Slowpokes 
$(this).closest('.dashdiv')    // Hmm. 
$(this).parents('.dashdiv:first')  // Hmm... 

Answer 2

आप से बेहतर हो सकता है, .closest() का उपयोग कर इस तरह:

यहाँ पेड़ का एक उदाहरण है अभी भी डोम परतों के माध्यम से लूपिंग, लेकिन यह एक नवागंतुक के साथ ही कम कोड के लिए और अधिक स्पष्ट है।

टीका

यह शुद्ध गति आप के बाद हो, तो आप के रूप में अच्छी jQuery पूरी तरह छोड़ सकते हैं और बजाय node.parentNode का उपयोग हो सकता है। लेकिन यह चक्रों की गिनती के घबराहट के मुद्दों में हो रहा है, और मुझे लगता है कि यह एक अकादमिक है।

यदि आप वाणिज्यिक उत्पादन इंजन या वेबमेल प्रदाता जैसे प्रमुख उत्पादन के लिए उच्च-प्रदर्शन कोड लिख रहे हैं, तो चक्रों की गणना करना महत्वपूर्ण है क्योंकि किसी भी छोटे अनुकूलन को हजारों बार गुणा किया जाता है। सभी उचित सम्मान के साथ, मुझे संदेह है कि आप उस तरह के कोड लिख रहे हैं।

यदि आप कुछ समय में कुछ लोगों द्वारा मारा जा रहा है, तो छोटे अनुकूलन एक बौद्धिक अभ्यास हैं जो परिणाम को किसी भी उल्लेखनीय तरीके से प्रभावित नहीं करेगा। किसी भी उपयोगकर्ता को नोटिस करना शुरू करने से पहले आपको सैकड़ों मिलीसेकंड द्वारा अपने कोड की दक्षता में सुधार करना होगा, और यह कोड ऐसा करने वाला नहीं है।

इसके बजाय, अगले डेवलपर के बारे में सोचने के लिए यह और अधिक महत्वपूर्ण है जो आपके कोड को देखेगा। उस डेवलपर के लिए, स्पष्ट, अच्छी तरह से लिखित कोड होना महत्वपूर्ण है जो तुरंत यह बताता है कि यह क्या कर रहा है। तरीकों में से parent().parent().parent() तरह नेत्र धुंधला चेन अस्पष्ट और भ्रमित कर सकते हैं अन्य डेवलपर्स, node.parentNode.parentNode.parentNode

का कुछ भी नहीं कहने के लिए - जिसके कारण .closest() पहली जगह में बनाया गया था। यह स्पष्ट, संक्षिप्त, और उल्लेखनीय रूप से कम श्रृंखला की तुलना में कम कुशल नहीं है। हजारों में 999 बार, यह वही तरीका है जिस पर आपको जाना चाहिए।

Answer 3

सबसे पहले, समय से पहले अनुकूलित न करें। यदि यह कोई समस्या नहीं पैदा कर रहा है (और प्लेटफॉर्म की एक श्रृंखला में सभी माध्यमों से पूरी तरह से परीक्षण करें) तो इसके बारे में चिंता न करें।

एक संभव अनुकूलन है: देशी डोम गुण का उपयोग करें:

var id = this.parentNode.parentNode.parentNode.id; 

नोट अच्छा jQuery तरीका यह है कि (जो धीमी हो जाएगा, लेकिन यह है कि एक समस्या नहीं हो सकता है) closest साथ है:

$(this).closest('div.dashdiv').prop('id'); 

Answer 4

संचालकों <a> तत्वों पर वर्तमान में कर रहे हैं, बजाय उन्हें .dashdiv तत्वों पर रखें।

तब आप this.id कर सकते हैं यदि e.target<a> तत्व था।

$('.dashdiv').click(function(e) { 
    if(e.target.nodeName.toLowerCase() === 'a') { 
     alert(this.id); 
    } 
});