.closest() और .parents ('selector') के बीच क्या अंतर है?

Question

इनके बीच क्या अंतर है? क्या दूसरे की तुलना में एक और अधिक कुशल है? मैं थोड़ी उलझन में हूं कि वे दोनों क्यों मौजूद हैं।

<table> 
    <tr> 
     <td>...</td> 
     <td><span class='toggle'>Toggle</span></td> 
    </tr> 
    <tr> 
     <td>...</td> 
     <td><span class='toggle'>Toggle</span></td> 
    </tr> 
    <tr> 
     <td>..</td> 
     <td><span class='toggle'>Toggle</span></td> 
    </tr> 
</table> 

<span> टैग से मैं इस्तेमाल कर सकते हैं या तो$(this).closest('tr'); या $(this).parents('tr'); माता-पिता/निकटतम <tr> टैग का उपयोग करने की: मैं इस मार्कअप है कहो।

Answer 1

parent तत्काल माता-पिता (कॉलर ऑब्जेक्ट में प्रत्येक तत्व के लिए एक) लौटाता है या कुछ भी नहीं अगर माता-पिता चयनकर्ता से मेल नहीं खाता है। closest प्रत्येक तत्व के लिए निकटतम पूर्वजों से मेल खाने वाले पूर्वजों को लौटाता है (जो मूल तत्व हो सकता है)। तीसरा समान कार्य, parents, सभी मिलान करने वाले पूर्वजों (तत्व को स्वयं सहित नहीं) देता है।

आम तौर पर, closestparent से HTML कोड को पुन: सक्रिय करने के लिए अधिक प्रतिरोधी है, यदि आप चयनकर्ता को समझदारी से चुनते हैं।

Answer 2

.parent() केवल एक स्तर ऊपर जाता है, जबकि closest() में वर्तमान तत्व और सभी माता-पिता शामिल हैं।

उदाहरण (नीचे div, x = मिलान किया तत्वों से चयन):

   parent() parent('body') .closest('div') .parents('div') 
body  
    div              x 
     div  x  <nothing>       x 
this--> div        x 

Answer 3

(नोट: प्रश्न के बारे में parents जा रहा है [करने के लिए कहा जा रहा है के बाद दिन संपादित किया गया था, parent के बारे में से प्रश्न बदलते बहुवचन ध्यान दें]। किस तरह की एक फर्क नहीं पड़ता!)

पुन आपके मूल प्रश्न के बारे में parent (एकवचन) बनाम closest: parent केवल एक स्तर ऊपर जाता है। closest वर्तमान तत्व (केवल माता-पिता नहीं) से शुरू होता है और पूर्वजों के माध्यम से खोजता रहता है जब तक कि यह कोई मिलान न हो (या पूर्वजों से बाहर हो)।

पुन अपना अपडेट किया गया सवाल के बारे में parents (बहुवचन) बनाम closest:

1. वर्तमान तत्व माना जाता है चाहे (यह closest साथ है, यह parents साथ नहीं है): दो मतभेद रहे हैं।

2. चाहे खोज पहले मैच के साथ बंद हो जाए (यह closest के साथ है, यह parents के साथ नहीं है)।

से

अपने मूल प्रश्न:

टैग से मैं या तो $ (this) .closest ('tr') इस्तेमाल कर सकते हैं; या $ (यह)। माता-पिता ('tr');

नहीं, असल में। $(this).parent('tr'); एक खाली jQuery ऑब्जेक्ट वापस करेगा, क्योंकि span के पैरेंट चयनकर्ता से मेल नहीं खाता है।

से

अपने अद्यतन प्रश्न:

टैग से मैं या तो $ (this) .closest ('tr') इस्तेमाल कर सकते हैं; या $ (यह)। माता-पिता ('tr');

आप कर सकते थे, प्रदान की कि आपके tr एक और tr भीतर भी नहीं है (उदाहरण के लिए एक मेज से युक्त एक टेबल)।यदि ऐसा है, तो आपको एक ही परिणाम मिल जाएगा। लेकिन अगर आपके पास टेबल के अंदर एक टेबल है, parents के साथ आपको tr एस (पूर्व तत्वों के सभी मिलेगा)। खाली jQuery वस्तु, के माता पिता -

• $(this).parent('div'):

  इस संरचना पर विचार करें:

  <div class="wrapper"> 
      <div class="inner"> 
      <p>Testing <span>1 2 3</span></p> 
      </div> 
  </div> 
  

  अगर हम span पर click हुक, यह क्या हम तीन प्रासंगिक तरीकों से वापस मिल है spandiv नहीं है।

• $(this).parents('div') - के साथ jQuery ऑब्जेक्ट दोdiv एस, "आंतरिक" और "रैपर" divs (उस क्रम में)।
• $(this).closest('div') - के साथ jQuery ऑब्जेक्ट एकdiv इसमें "आंतरिक" एक। खाली jQuery वस्तु, span की मूल नहीं एक span है -
  • $(this).parent('span'):

  यहाँ परिणाम अगर हम span पर click हुक और चयनकर्ता के रूप में span उपयोग करते हैं।

• $(this).parents('span') - खाली jQuery ऑब्जेक्ट, span में कोई पूर्वजों span एस नहीं है।
• $(this).closest('span') - span के साथ jQuery ऑब्जेक्ट क्लिक किया गया था।