jQuery: माता-पिता के किसी विशेष बच्चे को कैसे प्राप्त करें?

Question

एक सरलीकृत उदाहरण देने के लिए, मुझे पृष्ठ पर बहुत बार दोहराया गया ब्लॉक मिला है (यह गतिशील रूप से उत्पन्न होता है):

<div class="box">
   <div class="something1"></div>
   <div class="something2">
      <a class="mylink">My link</a>
   </div>
</div>

जब क्लिक किया जाता है, तो मैं इस लिंक के जनक से मिल सकता हूं:

$(".mylink").click(function() {
   $(this).parents(".box").fadeOut("fast");
});

हालाँकि ... मुझे <div class="something1">उस विशेष अभिभावक के पास जाने की आवश्यकता है।

असल में, क्या कोई मुझे बता सकता है कि सीधे-सीधे इसे संदर्भित करने में सक्षम होने के बिना उच्च स्तर के भाई-बहन को कैसे संदर्भित किया जाए? चलो इसे बड़ा भाई कहते हैं। बड़े भाई के वर्ग के नाम का सीधा संदर्भ पृष्ठ पर उस तत्व के हर उदाहरण को फीका कर देगा - जो वांछित प्रभाव नहीं है।

मैंने कोशिश की:

parents(".box .something1") ... no luck.
parents(".box > .something1") ... no luck.
siblings() ... no luck.

किसी को? धन्यवाद।

Comments

अनुराग का जवाब सही नहीं लग सकता है, लेकिन यह निश्चित रूप से मुझे रोक दिया और सोचने लगा- लेकिन यह आपके कोड में एक स्पष्ट टाइपो को इंगित कर रहा है जो आपके चयनकर्ता को विफल कर रहा है। चयनकर्ता, jQuery में, .parent() नहीं है .parents()

— डेविड कहते हैं कि

@ricebowl: गलत। api.jquery.com/parents

— SLaks

@ricebowl ... माता-पिता (मुझे कुछ div2 देंगे), इसलिए मुझे div बॉक्स में आने के लिए माता-पिता () की आवश्यकता है।

— टॉम

आह; मैं क्षमाप्रार्थी हूं। उम्म ... मुझे नहीं पता कि प्रदर्शन पर अपनी अज्ञानता छोड़ना सबसे अच्छा है, या किसी और को परेशान करने से बचने के लिए त्रुटि को हटाना ... =? फिर भी, कम से कम मैंने आज कुछ उपयोगी सीखा है; यह बात सही है ..? =)

— डेविड का कहना है कि मोनिका

@ricebowl, कोई चिंता नहीं, योगदान के लिए धन्यवाद।

— टॉम

Answer 1

कॉलिंग .parents(".box .something1")उन सभी मूल तत्वों को लौटाएगा जो चयनकर्ता से मेल खाते हैं .box .something। दूसरे शब्दों में, यह उन मूल तत्वों को लौटाएगा जो .something1अंदर हैं और हैं .box।

आपको इस तरह से निकटतम माता-पिता की संतान प्राप्त करने की आवश्यकता है:

$(this).closest('.box').children('.something1')

यह कोड .closestअंतरतम माता-पिता को एक चयनकर्ता से मिलाने के लिए कॉल .childrenकरता है , फिर उस मूल तत्व पर कॉल करता है जिसे आप जिस चाचा की तलाश में हैं।

Comments

मुझे पता है कि यह थोड़ा पुराना है लेकिन क्या इस मामले में माता-पिता () के बजाय निकटतम () का उपयोग करना बेहतर है क्योंकि मैं कल्पना करता हूं कि निकटतम () के साथ अधिक पेड़ ट्रैवर्सल है ?

— rmorse

@acSlater: उसे ट्री ट्रैवर्सल की जरूरत है । parent()गलत तत्व है।

— SLAKs

आह हाँ यह माता-पिता () है। माता-पिता () कि टॉम को खेद है! :)

— १

@acSlater: हाँ; इससे काम बन जाएगा। हालाँकि, यह जावास्क्रिप्ट को HTML संरचना से बहुत अधिक युग्मित बनाता है। .closest(...)अधिक लचीला है, और अधिक पठनीय भी है।

— SLKs

मामले में कोई भी सोच रहा है: आपने .closest () का उपयोग करके सही माता-पिता को पाया है, यदि आप एक ऐसे बाल तत्व की तलाश कर रहे हैं जो प्रत्यक्ष बच्चा नहीं है (लेकिन बच्चे का बच्चा, उदाहरण के लिए), बस उपयोग करें। .children के स्थान पर खोजें ()।

— फाबिएन स्नूवर्ट

Answer 2

$(this).parent()

ट्री ट्रैवरल मजेदार है

$(this).parent().siblings(".something1");

$(this).parent().prev(); // if you always want the parent's previous sibling

$(this).parents(".box").children(".something1");

और भी बहुत से तरीके, आपको ये डॉक्स मददगार लग सकते हैं ।

Comments

धन्यवाद, लेकिन माता-पिता की तलाश में नहीं था, बल्कि माता-पिता का एक और बच्चा (या वास्तव में दादा-दादी) था।

— टॉम

Hehe ... वास्तव में इसका पारिवारिक मामला है।

— टॉम

Answer 3

यह कक्षा के साथ पहला अभिभावक ढूंढेगा और boxफिर rexx मिलान के साथ पहला बच्चा वर्ग खोजेगा somethingऔर आईडी प्राप्त करेगा।

$(".mylink").closest(".box").find('[class*="something"]').first().attr("id")

Answer 4

अगर मैंने आपकी समस्या को सही ढंग से समझा, तो $(this).parents('.box').children('.something1')क्या यह वही है जो आप खोज रहे हैं?

Answer 5

आप कोष्ठक के भीतर और एक चयनकर्ता के .each()साथ उपयोग कर सकते हैं .children():

//Grab Each Instance of Box.
$(".box").each(function(i){

    //For Each Instance, grab a child called .something1. Fade It Out.
    $(this).children(".something1").fadeOut();
});