जो अधिक कुशल है:। Parent()। Parent()। Parent() ~ या ~ माता-पिता ("। Foo") ~ या ~ निकटतम ("। Foo")

Question

मेरे पास एक टैग है जो एनीमेशन को ट्रिगर करता है यह महान-महान-दादा-दादी है। निम्नलिखित सभी काम करेंगे, लेकिन जो सबसे कुशल है, और क्यों?

$(this).parent().parent().parent().parent().parent().animate(...); 

$(this).parents(".foo").animate(...); 

$(this).closest(".foo").animate(...); 

मुझे लगता है कि पहले हो सकता है, के रूप में यह सबसे स्पष्ट है, लेकिन रखरखाव कारणों के लिए (नेस्टिंग बदल सकते हैं) मैं दूसरी पसंद करते हैं। अभ्यास में आसानी से चलाने के लिए वे सभी दिखाई देते हैं।

Answer 1

अच्छी तरह से निकटतम केवल तभी उपयोगी होता है जब आप ऊपर जा रहे हों या 'क्लिक' तत्व पर उसी स्तर पर हों।उदाहरण के लिए आप folowing परिदृश्य के लिए है

हैं:

<div class="controls radio-other"> 
    <label class="radio"><input type="radio" name="item">Option one</label> 
    <label class="radio"><input type="radio" name="item">Option two</label> 
    <label class="radio"><input type="radio" name="item" class="other-option" data-othertarget="#otherone"> Other... </label> 
    <input type="text" placeholder="Alternative answer" id="otherone" class="hidden"> 
</div> 

फिर closest('#otherone')$('.other-option').click() पर गुप्त पाठ क्षेत्र नहीं मिलेगा बेहतर समाधान में इस परिदृश्य $(this).parentsUntil('.radio-other').find('#otherone')

उपयोग करने के लिए है को देखते हुए मेरी उत्तर मैंने jsperf बनाया है जो विभिन्न समाधानों के साथ उपरोक्त परिदृश्य को दर्शाता है। बस अपने एचटीएमएल परिदृश्य के लिए सबसे उपयोगी क्या उपयोग करें। परिणाम यह है कि parent().parent() सबसे तेज़ मेथोड है हालांकि यदि आपका एचटीएमएल उपयोग में अधिक लचीला है तो यह हमेशा अच्छा विकल्प नहीं होता है। एक div parent और parent().parent() ब्रेक जोड़ें।

Answer 2

यह एक बहुत अच्छी बात है कि आपने प्रदर्शन माप किया है। इस तरह के परिदृश्यों में बिल्कुल यही किया जाना चाहिए। यदि सभी अभ्यास में आसानी से चलने लगते हैं और आप प्रदर्शन से संतुष्ट हैं तो सबसे अधिक पढ़ने योग्य (दूसरा और तीसरा दिखना ठीक है) चुनें।

Answer 3

मुझे लगता है कि मैंने जॉन रेसिग की एक प्रस्तुति देखी है जिसमें कहा गया है कि निकटतम() अधिक अनुकूलित है, और यह कुछ समझ में आता है। निकटतम() jQuery के लिए एक नया जोड़ा है और वास्तव में इस बदसूरत माता-पिता()। पैरेंट() श्रृंखला को हल करने के लिए आता है। दूसरी तरफ माता-पिता() माता-पिता की एक श्रृंखला लौटाते हैं जो आपके foo वर्ग से मेल खाता है और निकटतम() की तुलना में खोज के मामले में अधिक लालची है जो पहले तत्व को पाता है और खोज बंद कर देता है।

मैं शर्त लगाता हूं कि निकटतम मैच (यदि आप निकटतम मैच की तलाश में हैं तो सबसे अधिक कुशल है)।

Answer 4

मैं वास्तविक गति पर टिप्पणी नहीं कर सकता, हालांकि पहला व्यक्ति आपको तत्वों के एक विशिष्ट विरासत में जोड़ता है, जिसे मैं दूर से शर्मिंदा करता हूं।

व्यक्तिगत रूप से, मैं कक्षा चयनकर्ताओं को वैसे भी कम करने का प्रयास करता हूं। मुझे एहसास है कि अक्सर कोई अन्य तरीका नहीं होता है, लेकिन अगर मैं एक आईडी चयनकर्ता में कारक कर सकता हूं तो मुझे पता है कि प्रदर्शन में सुधार होने की संभावना है।

Answer 5

यहाँ एक analyzation है:

• parent() डोम पेड़ में सिर्फ एक स्तर ऊपर चलता है।
• parents(".foo") रूट तक चलता है और केवल उन तत्वों का चयन करता है जो दिए गए चयनकर्ता .foo से मेल खाते हैं।
• closest(".foo") रूट तक चलता है लेकिन एक बार तत्व तत्व चयनकर्ता .foo से मेल खाता है।

तो मैं अंतिम, closest(".foo") चुनूंगा। कारण:

• यह parent चेनिंग, क्योंकि यदि आपके दस्तावेज़ में परिवर्तन क्योंकि आप हटाया या एक पदानुक्रम कहा, आप jQuery कोड बदलने की जरूरत नहीं है की तुलना में बेहतर है।
• यह parents(".foo") से बेहतर है, क्योंकि यह एक मैच के रूप में जल्द ही बंद हो जाता है।

Answer 6

तुम भी parents('.foo:first') उपयोग कर सकते हैं। मुझे लगता है कि closest() जैसा ही काफी है।

Answer 7

फ़ायरफ़ॉक्स 3.6.3 में एक त्वरित परीक्षण से पता चलता है कि parents('.foo').eq(0) वास्तव में closest('.foo') से काफी तेज है। यह बहस योग्य है कि यह रखरखाव योग्य है, लेकिन यह विशिष्ट परिदृश्यों में अधिक 'कुशल' साबित हो सकता है।

Answer 8

मुझे यह वेबसाइट आप जिस प्रश्न को चाहते हैं उसे समझाते हैं।

Use jQuery's $.closest() vs $.parents()