2010-02-04 16 views
28

किसी तत्व के पूर्वजों का चयन करने के लिए jQuery का उपयोग करना संभव है?jQuery पूर्वजों का चयन करें

मार्कअप:

<div id="ancestor-1"> 
    <div> 
     <a href="#" class="click-me">Click me</a> 
    </div> 
</div> 
<div id="ancestor-2"> 
    <div> 
     <a href="#" class="click-me">Click me</a> 
    </div> 
</div> 

स्क्रिप्ट:

$(".click-me").click(function(){ 
    // var ancestorId = ???; 
    alert(ancestorId) 
}); 

उत्तर

0

आप parent() के लिए देख रहे हैं? माता-पिता चयनकर्ता के लिए jQuery Doc। यदि यह आपके परिदृश्य के लिए अलग है तो समझाएं कि आपका अपेक्षित आउटपुट क्या है।

10

आपका मतलब कुछ ऐसा है?

$('.click-me').click(function() { 
    var $theAncestor = $(this).closest('#ancestor-1'); 
} 

यह एक मैच मिलने तक सभी पूर्वजों के माध्यम से खोज करेगा।

http://api.jquery.com/closest/

संपादित करें:

जेरोम, आपके सवाल कई तरीके व्याख्या की जा सकती। यह jQuery की शक्ति और लचीलापन से बात करता है।

कृपया निम्नलिखित पर विचार करें।

सबसे पहले, अपने प्रश्न का उत्तर देने के लिए, हाँ, किसी तत्व के पूर्वजों का चयन करने के लिए jQuery का उपयोग करना संभव है।

मुझे लगता है कि हम मान सकते हैं कि आप jQuery के किसी भी तत्व का चयन करने की क्षमता के बारे में पता कर रहे हैं, चाहे के माध्यम से पूर्वज या वंशज:

$('#myElement') 

क्लिक-मुझे उदाहरण के लिए, यदि आप का एक सेट है चाहते हैं को देखते हुए एक तत्व के पूर्वजों के सभी लौट आए, उपयोग:

$(this).parents() 

या

$(this).parents(selector) 

लेकिन ध्यान रखें कि यह सभी पूर्वजों को लौटने वाले सभी पूर्वजों, या चयनकर्ता द्वारा दिए जाने वाले सभी मैच के माध्यम से पार करेगा।

आप तत्काल माता-पिता के लिए चाहते हैं, तो लौट आए, उपयोग:

$(this).parent() 

क्या आप जानते हैं जो पूर्वज हैं की जरूरत है, उपयोग करें:

$(this).closest(selector) 

लेकिन ध्यान रखें कि यह केवल वापस आ जाएगी होना पहला मैच, और यदि वर्तमान तत्व (यह) एक मैच है, तो वह उसे वापस कर देगा।

मुझे उम्मीद है कि इससे मदद मिलती है।

+2

'माता-पिता()' और 'निकटतम()' के बीच का अंतर सूक्ष्म लेकिन महत्वपूर्ण है। 'निकटतम()' वर्तमान तत्व को वापस कर देगा यदि यह एक मैच है; 'माता-पिता()' _lyly पूर्वजों _ देता है। आप वर्तमान तत्व को वापस करने की संभावना नहीं चाहते हैं। 'निकटतम() 'केवल एक तत्व देता है; 'माता-पिता()' सभी मिलान करने वाले तत्व लौटाते हैं। –

+0

@Ryan - मेरा उत्तर प्रश्न के लिए विशिष्ट था। प्रश्न माता-पिता के बारे में सामान्य पूछताछ के बजाए एक विशिष्ट पूर्वजों के लिए एक प्रश्न सुझाता है। पूर्वजों की बढ़ती प्रकृति को देखते हुए, ऐसा लगता है कि जेरोम संदर्भ से पूर्वजों आईडी की गणना करने का इरादा रख सकता है और अनुरोध कर सकता है। – user113716

+0

पैट्रिक, यदि जेरोम संदर्भ से पूर्वजों आईडी की गणना करने का इरादा रखता है, ** '$ (इस) .closest ('# पूर्वज -1' ') का उपयोग करने में बिल्कुल कोई बिंदु नहीं है **' $ (' # पूर्वज -1 ')' न केवल पर्याप्त होगा बल्कि तेज भी होगा। कभी-कभी, किसी प्रश्न के इरादे में पढ़ना बेहतर होता है और तदनुसार उत्तर निर्देशित किया जाता है। –

43

तत्काल मूल तत्व के लिए parent() आज़माएं।

$(".click-me").click(function() { 
    var ancestor = $(this).parent(); 
    alert(ancestor) 
}); 

या parents() मिलान करने वाले सभी पूर्वज तत्वों के लिए।

$(".click-me").click(function() { 
    var ancestors = $(this).parents(".some-ancestor"); 
    alert(ancestors) 
}); 
पहले निकटता से मेल खाने तत्व (या तो एक पूर्वज या स्वयं) के लिए

या closest()

$(".click-me").click(function() { 
    var ancestor = $(this).closest(".some-ancestor"); 
    alert(ancestor) 
}); 

parents() और closest() के बीच का अंतर सूक्ष्म लेकिन महत्वपूर्ण है। closest() यदि यह एक मैच है तो वर्तमान तत्व वापस कर देगा; parents()केवल पूर्वजों देता है। आप वर्तमान तत्व को वापस करने की संभावना नहीं चाहते हैं। closest() भी एक तत्व देता है; parents() सभी मिलान तत्वों को लौटाता है।

2

साथ divs वापसी होगी संयोजन में माता-पिता() या निकटतम() का उपयोग कर, शायद कोशिश करें, एक चयनकर्ता के साथ निर्धारित करने के लिए जो पूर्वज मेल खाना चाहिए। उदाहरण के लिए, एक आईडी के साथ निकटतम पूर्वजों div खोजें।

$('.click-me').click(function() { 
     var ancestorId = $(this).closest('div[id]'); 
     alert(ancestorId); 
}); 
0

यह वास्तव में निर्भर करता है कि आप क्या हासिल करना चाहते हैं। क्या आप वर्ग के इस्तेमाल किए बिना सभी पूर्वजों की खोज करना चाहते हैं? या आप पूर्वजों के सभी तत्वों की खोज करना चाहते हैं और कुछ वर्ग (आपके मामले में पूर्वज-एक्स) है?

$(".click-me").click(function(){ 
    var parentElements = $(this).parents().map(function() { 
     return this.tagName; 
    }) 
    // whatever else you want to do with it 
}); 

शायद सबसे अच्छा तरीका हो सकता है:

आप किसी भी पूर्वजों के माध्यम से चक्र चाहते हैं, बस .parent() (वहाँ एक उत्कृष्ट उदाहरण है कि कैसे करने के लिए सभी तत्वों के माध्यम से चक्र) या .parents() आप की तरह उपयोग कर सकते हैं जो का उपयोग .parents() का उपयोग करें जब तक कि आप कुछ आईडी या कक्षा के साथ तत्व प्राप्त न करें। यह वास्तव में निर्भर करता है कि आप क्या करना चाहते हैं।

संबंधित मुद्दे