JQuery विशिष्ट वर्ग उपसर्ग के साथ पहला मूल तत्व खोजता है

Question

मैं पहला अभिभावक प्राप्त करना चाहता हूं जिसके पास एक विशिष्ट वर्ग उपसर्ग है, मान लीजिए:

<div class="div-a3332"> 
  <div class="div-a89892">
    <p>
      <div class="div-b2">
        <div id="divid">hi</div>
      </div>
    </p>
  </div>
</div>

उदाहरण के लिए, मेरा वर्तमान तत्व है #dividऔर मैं पहला तत्व खोजना चाहता हूं जिसमें वर्ग उपसर्ग div-a है। तो मूल रूप से यह चयन करेगा:

<div class="div-a89892">

Comments

रूक जा। एक बार में जानकारी को संयोजित करने के बजाय कई वर्गों का उपयोग करें। 'मिलान' चयनकर्ता धीमा है, और यह डिज़ाइन किसी भी संशोधन के लिए पैमाने पर नहीं है। <div class='a'>, तो के लिए नियम प्रदान करते हैं div.a। मुझे नहीं पता कि आप divक्लासनाम में क्यों डाल रहे हैं , वास्तव में।

— स्टीफन केंडल

फिर भी, डेटा को वर्ग-उपसर्गों में विलय न करें। यह एक भयानक पैटर्न है, और यह आसानी से कई वर्गों के साथ बनाया गया है।

— स्टीफन केंडल

@StefanKendall: कभी-कभी आप दूसरों की थर्ड पार्टी बकवास से निपटते हैं, और कभी-कभी आप ऐसी लीगेसी ऐप्स का समर्थन कर रहे हैं जिन्हें आप जल्दी ठीक नहीं कर सकते। खराब डिजाइन जीवन का एक तथ्य है, और यह पूरी तरह से वैध सवाल है।

— Nerdmaster

Answer 1

.closest()चयनकर्ता के साथ प्रयोग करें :

var $div = $('#divid').closest('div[class^="div-a"]');

Comments

BTW, पता नहीं क्यों यह नीचे गिरा दिया गया था। वर्ग-उपसर्ग चयनकर्ता भंगुर है, लेकिन यह काम करेगा ।

— मैट बॉल

ओपी: सुनिश्चित करें कि आप जिस तत्व की तलाश कर रहे हैं, वह एक माता-पिता है जो डोम ट्री से कहीं ऊपर है और आप जिस वस्तु (दस्तावेज के अनुसार) की तलाश कर रहे हैं, उसके समान नहीं है। यह "दस्तावेज़ में कहीं भी निकटतम" नहीं है, लेकिन "डोम ट्री पर काम करके निकटतम" है।

— क्रिश्चियन पी।

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

— टाइम ट्रेवल

@ समय divतत्व चयनकर्ता को हटा दें $('#divid').closest('[class^="div-a"]'):। जैसा कि @Stefan ने टिप्पणी की, हालांकि, आपको वास्तव में कई वर्गों का उपयोग करना चाहिए।

— मैट बॉल

यह चयनकर्ता साइकिल की एक बेतुकी राशि लेता है (लेकिन यह अभी भी तेज हो सकता है)। यदि आपको IE6, IE7, या IE8 का समर्थन करने की आवश्यकता है, तो यह वास्तव में आपको खराब कर सकता है यदि आपका DOM बहुत बड़ा है; जब IE वीएम निर्देशों की एक निश्चित संख्या को निष्पादित किया जाता है, तो आईई "स्क्रिप्ट का जवाब नहीं दे रहा है" डायलॉग को फेंक देता है, और निश्चित समय के बाद नहीं। मैंने ऐसी स्क्रिप्ट देखी हैं जो इस कारण से 0.1ms क्रैश इंटरनेट एक्सप्लोरर में पूरी होती हैं।

— स्टीफन केंडल

Answer 2

बाद में Jquery ने आपको .parents()विधि के साथ माता-पिता को खोजने की अनुमति दी ।

इसलिए मैं उपयोग करने की सलाह देता हूं:

var $div = $('#divid').parents('div[class^="div-a"]');

यह चयनकर्ता से मेल खाते हुए सभी मूल नोड्स देता है। चयनकर्ता उपयोग से मेल खाने वाला पहला अभिभावक पाने के लिए:

var $div = $('#divid').parents('div[class^="div-a"]').eq(0);

ऐसे अन्य डोम ट्रेवर्सल क्वेरी के लिए, पर दस्तावेज़ीकरण देखें डोम traversing ।

Comments

इसका उत्तर भ्रामक नहीं है, इसका सिर्फ एक और विकल्प .closest (), .parents () में अधिक पठनीय दिख रहा है और समस्या का एक और समाधान है।

— सनी आर गुप्ता

क्लोज़ेस्ट इस से बेहतर उपाय है कि निकटतम को केवल पहला मैच मिलेगा, जबकि माता-पिता को सभी मैच डोम के ऊपर मिलेंगे। स्पष्ट रूप से निकटतम का उपयोग करने के लिए अधिक कुशल है, हालांकि मैं सहमत हूं, यह सबसे अच्छा नामित फ़ंक्शन नहीं है।

— मोगा 01

काफी मजेदार, मैंने इस समाधान का उपयोग करना समाप्त कर दिया है .parentsUtil () के रूप में मैं उम्मीद के मुताबिक काम नहीं कर रहा था।

— मार्क हैंडी