jQuery घूमाई - closest() विधि

jQuery बारी-बारी से जानकारी पुस्तिका

उदाहरण

इस उदाहरण में, closest() के द्वारा इवेंट डेलीगेशन का प्रदर्शन किया जाता है। जब सबसे निकटतम सूची एलीमेंट या उसके उपशाखा एलीमेंटों पर क्लिक किया जाता है, तो पीली पृष्ठभूमि को टूट जाता है:

$( document ).bind("click", function( e ) {
    $( e.target ).closest("li").toggleClass("hilight");
  });

आप खुद साफ़ी से प्रयास करें

विभावना और उपयोग

closest() विधि में चयनकर्ता के समेकित पहले अभिजात एलीमेंट प्राप्त करती है, जो वर्तमान एलीमेंट से शुरू होती है और DOM ट्री पर ऊपर की ओर घूमती है。

व्याकरण

.closest(selector)
पारामीटर वर्णन
selector चयनकर्ता एक्सप्रेशन को शामिल करने वाला स्ट्रिंग मान

विस्तृत वर्णन

यदि DOM एलीमेंट सेट के प्रतिनिधित्व करने वाला jQuery ऑब्जैक्ट दिया गया है, .closest() विधि हमें डॉम ट्री में इन एलीमेंटों और उनके अभिजातों को रिट्रीव करने की अनुमति देती है, और चयनकर्ता के आधार पर नया jQuery ऑब्जैक्ट बनाती है。.parents() .closest() विधि और उसके समान, वे दोनों DOM ट्री पर ऊपर की ओर घूमते हैं। उनके बीच का फर्क अल्प, लेकिन महत्वपूर्ण है:

.closest() .parents()
वर्तमान एलीमेंट से शुरू करते हुए पिता एलीमेंट से शुरू करते हुए
DOM ट्री पर ऊपर की ओर घूमते हुए, जब तक चयनकर्ता के समेकित मेल होने वाला एलीमेंट नहीं मिले DOM ट्री पर ऊपर की ओर घूमते हुए, जब तक दस्तावेज़ का मूल एलीमेंट नहीं मिले, हर अभिजात एलीमेंट को एक अस्थायी सेट में जोड़ें; यदि चयनकर्ता लागू होता है, तो इस सेट पर उस चयनकर्ता के आधार पर फ़िल्टरिंग किया जाएगा。
शून्य या एक एलीमेंट वाला jQuery ऑब्जैक्ट वापस करें शून्य, एक या अधिक एलीमेंटों वाला jQuery ऑब्जैक्ट वापस करें

अभी नीचे के HTML टुकड़े देखें:

<ul id="one" class="level-1">
  <li class="item-i">I</li>
  <li id="ii" class="item-ii">II
  <ul class="level-2">
    <li class="item-a">A</li>
    <li class="item-b">B
      <ul class="level-3">
        <li class="item-1">1</li>
        <li class="item-2">2</li>
        <li class="item-3">3</li>
      </ul>
    </li>
    <li class="item-c">C</li>
  </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

उदाहरण 1

यदि हम <ul> एलीमेंट को आइटम A से शुरू करके खोजना चाहते हैं तो:

$('li.item-a').closest('ul').css('background-color', 'red');

आप खुद साफ़ी से प्रयास करें

इससे level-2 <ul> का रंग बदलेगा क्योंकि डॉम ट्री को ऊपर की ओर बारी-बारी से जाते हुए पहले ही इस एलीमेंट को मिलता है。

उदाहरण 2

यदि हम <li> एलीमेंट को खोजना चाहते हैं तो:

$('li.item-a').closest('li').css('background-color', 'red');

आप खुद साफ़ी से प्रयास करें

इससे लिस्ट आइटम A का रंग बदलेगा। .closest() विधा डॉम ट्री को ऊपर की ओर बारी-बारी से जाते हुए आइटम A तक अनुसरण करती है。

उदाहरण 3

हम डॉम एलीमेंट को कंटेक्स्ट के रूप में पास कर सकते हैं और उसमें से सबसे निकटतम एलीमेंट को खोज सकते हैं。

var listItemII = document.getElementById('ii');
$('li.item-a').closest('ul', listItemII).css('background-color', 'red');
$('li.item-a').closest('#one', listItemII).css('background-color', 'green');

आप खुद साफ़ी से प्रयास करें

इस कोड से level-2 <ul> का रंग बदलेगा क्योंकि यह लिस्ट आइटम A का पहला <ul> पूर्ववर्ती है और साथ ही लिस्ट आइटम II का वंशज भी है। यह level-1 <ul> का रंग नहीं बदलेगा क्योंकि यह list item II का वंशज नहीं है。

jQuery बारी-बारी से जानकारी पुस्तिका