मैं jQuery में एक तत्व के n-वें स्तर के माता-पिता कैसे प्राप्त करूं?

Question

जब मैं प्राप्त करना चाहता हूं, उदाहरण के लिए, मुझे जिस तत्व को लिखना होगा उसके तीसरे स्तर के माता-पिता $('#element').parent().parent().parent()क्या इसके लिए एक अधिक इष्टतम तरीका है?

Comments

मैं केवल संख्या (स्तर) देना चाहता हूं और तत्व प्राप्त करना चाहता हूं, क्योंकि मेरे तत्व में कोई आईडी या नाम नहीं हो सकता है

— Artur Keyan

यदि आप इस कार्यक्षमता का पुनः उपयोग करने की योजना बनाते हैं, तो इष्टतम समाधान एक jQuery प्लगइन बनाना है।

— zzzzBov

कुछ प्रदर्शन तुलना के लिए jsperf.com/jquery-get-3rd-level-parent देखें

— a'r

एक और अच्छा उपकरण ".closest ()" फ़ंक्शन है। $ ('li.item')। निकटतम ('div') आपको DIV देगा जो कि li.item का निकटतम पूर्वज होगा। उस समय के लिए अच्छा है जब आपको पता नहीं है कि तत्व कितने स्तर का है, लेकिन आप इसका पता / पता / क्लास / कुछ और लगाते हैं।

— ग्राहम

Answer 1

चूँकि माता-पिता () पूर्वजों के तत्वों को बाहरी लोगों के निकटतम से लौटाते हैं, इसलिए आप इसे eq में बदल सकते हैं () :

$('#element').parents().eq(0);  // "Father".
$('#element').parents().eq(2);  // "Great-grandfather".

Comments

क्या मैं इस $ ('# तत्व') का उपयोग कर सकता हूं। माता-पिता () [2]? या इसे eq (2)

— Artur Keyan

यह कई तत्वों के चयन के लिए काम नहीं करेगा, एक सुरक्षित तरीका होगा:$('.element').first().parents().eq(num);

— zzzzBov

@Arthur, का उपयोग करके [2]अंतर्निहित DOM तत्व eq(2)वापस आएगा , उपयोग करने से jQuery ऑब्जेक्ट वापस आ जाएगा।

— Frédéric Hamidi

@zzzzBov, बहुत सच है, लेकिन प्रश्नकर्ता के मामले में केवल एक तत्व चुना जाएगा (क्योंकि वह एक आईडी से मेल खाता है)।

— Frédéric Hamidi

यदि आप एक आईडी "# पेमेंट" पर एक नज़र डालते हैं, तो यह केवल एक ही तत्व लौटाएगा क्योंकि आईडी लुकअप कैसे काम करता है, वे डोम में उस आईडी के साथ पहला तत्व वापस करते हैं। अगर दूसरी तरफ आपने "div # एलिमेंट" या एक क्लास सिलेक्टर किया तो आप सही होंगे।

— हेनरी

Answer 2

आपकी आवश्यकताओं पर निर्भर करता है, यदि आप जानते हैं कि आपके लिए आपके माता-पिता क्या देख रहे हैं।

उदा: http://jsfiddle.net/HenryGarle/Kyp5g/2/

<div id="One">
    <div id="Two">
        <div id="Three">
            <div id="Four">

            </div>
        </div>
    </div>
</div>


var top = $("#Four").parents("#One");

alert($(top).html());

सूचकांक का उपयोग करके उदाहरण:

//First parent - 2 levels up from #Four
// I.e Selects div#One
var topTwo = $("#Four").parents().eq(2);

alert($(topTwo ).html());

Comments

मैं अब इस तरह से हूं, लेकिन मैं स्तर देना चाहता हूं

— Artur Keyan

जवाब नीचे पढ़ें और सभी का खुलासा किया जाएगा! (मैंने आपको स्तर के उदाहरण दिए हैं)

— हेनरी

यह अन्य सभी प्रकार के चयनकर्ताओं के लिए अच्छी तरह से काम करता है। उदाहरण के लिए, यदि आप एक निश्चित वर्ग वाले सभी माता-पिता और माता-पिता की सूची चाहते हैं, तो यह उन्हें वापस कर देगा।

— अंधेरे में

Answer 3

आप लक्ष्य माता-पिता को एक आईडी या वर्ग (जैसे myParent) दे सकते हैं और संदर्भ साथ है $('#element').parents(".myParent")

Comments

मैं केवल संख्या देना चाहता हूं और तत्व प्राप्त करना चाहता हूं, क्योंकि मेरे तत्व में कोई आईडी या नाम नहीं हो सकता है

— Artur Keyan

Answer 4

एक तेज तरीका सीधे जावास्क्रिप्ट का उपयोग करना है, जैसे।

var parent = $(innerdiv.get(0).parentNode.parentNode.parentNode);

यह jQuery .parent()कॉल का पीछा करने की तुलना में मेरे ब्राउज़र पर काफी तेजी से चलता है ।

देखें: http://jsperf.com/jquery-get-3rd-level-parent

Comments

"काफी तेज" द्वारा, हम गति अंतर के संदर्भ में परिमाण के एक क्रम के बारे में देख रहे हैं (क्रोम 51 पर jQuery 1.10.1 चल रहा है)। निश्चित रूप से सार्थक कार्यान्वयन यदि आप गति के लिए ट्यूनिंग कर रहे हैं।

— इयान फ्रेजर

Answer 5

उपयोग करने पर कोई उत्तर नहीं मिला closest() और मुझे लगता है कि यह सबसे सरल उत्तर है जब आपको नहीं पता कि आवश्यक तत्व कितने स्तर तक है, इसलिए उत्तर पोस्ट करना:
आप closest()पहले तत्व से मेल खाने के लिए चयनकर्ताओं के साथ संयुक्त फ़ंक्शन का उपयोग कर सकते हैं जब तत्व से ऊपर की ओर जाता है:

('#element').closest('div')    // returns the innermost 'div' in its parents
('#element').closest('.container')    // returns innermost element with 'container' class among parents
('#element').closest('#foo')    // returns the closest parent with id 'foo'

Answer 6

यह आसान है। महज प्रयोग करें

$(selector).parents().eq(0); 

जहां 0 माता-पिता का स्तर है (0 माता-पिता है, 1 माता-पिता का माता-पिता है)

Answer 7

बस :eq()इस तरह चयनकर्ता जोड़ें :

$("#element").parents(":eq(2)")

आप सिर्फ इंडेक्स को निर्दिष्ट करते हैं जो अभिभावक: तत्काल माता-पिता के लिए, 1 ग्रैंड-पैरेंट के लिए, ...

Comments

यह तरीका काम पाने का सबसे तेज़ तरीका है। यहाँ यह साबित करने के लिए बेंचमार्क है: jsperf.com/jquery-get-element-s-nth-parent

— java-man-script

Answer 8

यदि आप इस कार्यक्षमता का पुन: उपयोग करने की योजना बनाते हैं, तो इष्टतम समाधान एक jQuery प्लगइन बनाना है:

(function($){
$.fn.nthParent = function(n){
  var $p = $(this);
  while ( n-- >= 0 )
  {
    $p = $p.parent();
  }
  return $p;
};
}(jQuery));

बेशक, आप इसे वैकल्पिक चयनकर्ता और ऐसी अन्य चीजों के लिए अनुमति देना चाहते हैं।

एक नोट: यह 0माता-पिता के लिए एक आधारित सूचकांक का उपयोग करता है , इसलिए nthParent(0)कॉलिंग के समान है parent()। यदि आपके पास 1अनुक्रमणिका आधारित है, तो उपयोग करेंn-- > 0

Comments

मुझे लगता है कि आप इस हिस्से को तेजी से पा लेंगे: var p = 1 + n; while (p--) { $p = $p.parent(); }और यदि आप 1 पर आधारित बदलना चाहते हैं, तो जावास्क्रिप्ट "फाल्सी" के रूप में उपयोग कर सकते हैं: while (n--) { $p = $p.parent();} एक सशर्त चेक की बचत

— मार्क शुल्त्स

@ मर्क शुल्त्स, यह केवल गति के बारे में नहीं है, यह विश्वसनीयता के बारे में भी है। अगर कोई अनजाने में कॉल करे तो आपके फंक्शन का क्या होगा nthParent(-2)? आपका उदाहरण टूट गया है।

— zzzzBov

या बस वापस(function($) { $.fn.nthParent = function(n) { return $(this).parents().eq(n); }; }(jQuery));

— मार्क Schultheiss

@ मर्क शुल्त्स, फिर से, विश्वसनीयता। मेरा फ़ंक्शन चयन में प्रत्येक तत्व के लिए nthParent लौटाता है , आपका फ़ंक्शन nth तत्व को सूची में लौटाता है, parentsजिसमें एक से अधिक तत्वों के साथ चयन के लिए गलत होगा।

— zzzzBov

-2 के बारे में सच है, और जैसा कि आपके उदाहरण में उपयोग var p = n >? (1 + n):1; करने के बजाय "कुछ नहीं" के बजाय उस मामले में पहले माता-पिता को लौटाएगा - या जहां यह मेरे उदाहरण में लूप को तोड़ता है। एसओ, यह शायद होना चाहिए: (function($) { $.fn.nthParent = function(n) { var $p = $(this); if (!(n > -0)) { return $() }; var p = 1 + n; while (p--) { $p = $p.parent(); } return $p; }; }(jQuery)); यदि आप कुछ भी वापस नहीं करना चाहते हैं।

— मार्क शुल्त्स

Answer 9

यदि आपके पास एक सामान्य अभिभावक div है तो आप माता-पिता ( लिंक ) का उपयोग कर सकते हैं

उदाहरण के लिए: $('#element').parentsUntil('.commonClass')

लाभ यह है कि आपको यह याद रखने की ज़रूरत नहीं है कि इस तत्व और आम माता-पिता (कॉमनक्लास द्वारा परिभाषित) के बीच कितनी पीढ़ी है।

Answer 10

आप भी उपयोग कर सकते हैं :

$(this).ancestors().eq(n) 

ex: $(this).ancestors().eq(2)-> जनक के माता पिता this।

Answer 11

आप कुछ इस तरह का उपयोग कर सकते हैं:

(function($) {
    $.fn.parentNth = function(n) {
        var el = $(this);
        for(var i = 0; i < n; i++)
            el = el.parent();

        return el;
    };
})(jQuery);

alert($("#foo").parentNth(2).attr("id"));

http://jsfiddle.net/Xeon06/AsNUu/

Comments

नीच नहीं, लेकिन यह शायद सबसे खराब समाधान (यानी अक्षम) है।

— जटासटटा

Answer 12

eq का उपयोग करते हुए गतिशील DOM को हथियाने के लिए प्रकट होता है .parent () का उपयोग करते हुए। मूल () उस DOM को हथियाने के लिए प्रकट होता है जो शुरू में लोड किया गया था (यदि वह भी संभव है)।

मैं उन दोनों को एक ऐसे तत्व पर उपयोग करता हूं जिसमें कक्षाएं हैं जिन्होंने इसे ऑनमूवर पर लागू किया है। eq .parent ()। पैरेंट () doesn't को क्लासेस दिखाता है।

Answer 13

जैसा कि माता-पिता एक सूची देते हैं, यह भी काम करता है

$('#element').parents()[3];