सवाल $ (इस) चयनकर्ता के बच्चों को कैसे प्राप्त करें?


मेरे पास इस तरह का एक लेआउट है:

<div id="..."><img src="..."></div>

और बच्चे का चयन करने के लिए एक jQuery चयनकर्ता का उपयोग करना चाहते हैं img के अंदर div क्लिक पर।

पाने के लिए div, मुझे यह चयनकर्ता मिला है:

$(this)

मैं बच्चे को कैसे प्राप्त कर सकता हूं img एक चयनकर्ता का उपयोग कर?


2046
2017-11-20 19:44


मूल




जवाब:


JQuery कन्स्ट्रक्टर नामक दूसरे पैरामीटर को स्वीकार करता है context जिसका चयन चयन के संदर्भ को ओवरराइड करने के लिए किया जा सकता है।

jQuery("img", this);

जो उपयोग करने के समान है .find() इस तरह:

jQuery(this).find("img");

यदि आप चाहते हैं imgs हैं केवल क्लिक किए गए तत्व के प्रत्यक्ष वंशज, आप भी उपयोग कर सकते हैं .children():

jQuery(this).children("img");

2690
2017-11-20 21:27



इसके लायक होने के लिए: jQuery ("img", यह) आंतरिक रूप से रूपांतरित हो गया है: jQuery (यह)। ढूँढें ("img") तो दूसरा कभी इतना तेज़ है। :) - Paul Irish
धन्यवाद @ पॉल, मुझे चिंता थी कि ढूंढने () का उपयोग करना था गलत, यह एकमात्र तरीका है;) - Agos
यदि नोड एक प्रत्यक्ष बच्चा है, तो यह केवल $ (यह) करने के लिए सबसे तेज़ नहीं होगा। बच्चे ('img'); ? - adamyonk
@adamyonk वास्तव में नहीं, कम से कम नहीं अगर यह जाने के लिए कुछ भी है: jsperf.com/jquery-children-vs-find/3 - Simon Stender Boisen
मैं इस उदाहरण में @PaulIrish के बारे में सटीक विपरीत देख रहा हूं - jsperf.com/jquery-selectors-comparison-a   । क्या कोई इस पर थोड़ा प्रकाश डाल सकता है? या तो मुझे टेस्ट-केस गलत मिला, या पिछले 4 सालों में jquery ने इस अनुकूलन को बदल दिया। - Jonathan Vanasco


आप भी इस्तेमाल कर सकते हैं

$(this).find('img');

जो सब वापस आ जाएगा imgएस के वंशज हैं div


445
2017-11-20 21:23



सामान्य मामलों में, ऐसा लगता है $(this).children('img') बेहतर होगा। जैसे <div><img src="..." /><div><img src="..." /></div></div> क्योंकि संभवतः उपयोगकर्ता प्रथम स्तर के आईएमजी ढूंढना चाहता है। - Buttle Butkus


यदि आपको पहले प्राप्त करने की आवश्यकता है img यह बिल्कुल एक स्तर नीचे है, आप कर सकते हैं

$(this).children("img:first")

127
2017-07-21 18:47



कर देता है :first केवल मैच "बिल्कुल एक स्तर नीचे", या यह मेल खाता है "प्रथम"  img वह पाया गया था? - Ian Boyd
@IanBoyd, .children() वह जगह है जहां "बिल्कुल एक स्तर नीचे" आता है और :first वह जगह है जहां से "पहला" आया था। - Tyler Crompton
@IanBoyd, उस तत्व के लिए unaccounted होगा। यह केवल तभी लागू होगा जब आप उपयोग करते हैं .find() के बजाय .children() - Tyler Crompton
यदि आप इसका उपयोग कर रहे हैं: पहले .find () के साथ सावधान रहें, jQuery सभी वंशजों को ढूंढता है और फिर पहले तत्व को वापस लेता है, कभी-कभी बहुत महंगा - Clarence Liu
@ बटलबूटस सवाल में, this पहले से ही एक संदर्भ था <div> युक्त <img>, हालांकि यदि आपके पास संदर्भ के विपरीत से टैग के कई स्तर हैं तो आप निश्चित रूप से निश्चित रूप से एक से अधिक रचना कर सकते हैं children() कॉल - rakslice


यदि आपका डीआईवी टैग तुरंत आईएमजी टैग के बाद होता है, तो आप इसका भी उपयोग कर सकते हैं:

$(this).next();

70
2018-06-21 13:25



.next () वास्तव में नाजुक है, जब तक कि आप हमेशा गारंटी नहीं दे सकते कि तत्व अगले तत्व होगा, यह एक अलग विधि का उपयोग करना बेहतर है। इस मामले में, आईएमजी एक वंशज है, div के भाई नहीं, div। - LocalPCGuy
ओपी ने स्पष्ट रूप से div के अंदर एक बच्चे img के लिए पूछा। - Giorgio Tempesta


प्रत्यक्ष बच्चे हैं

$('> .child', this)

56
2017-07-16 20:07



यह उत्तर संभावित रूप से भ्रामक है क्योंकि 'बच्चे' वर्ग के साथ कोई तत्व नहीं है, इसलिए यह काम नहीं करेगा। - Giorgio Tempesta


आप नीचे दिये गये पैरेंट div के सभी img तत्व पा सकते हैं

$(this).find('img') or $(this).children('img')

यदि आप विशिष्ट आईएमजी तत्व चाहते हैं तो आप इस तरह लिख सकते हैं

$(this).children('img:nth(n)')  
// where n is the child place in parent list start from 0 onwards

आपके div में केवल एक आईएमजी तत्व होता है। तो नीचे यह सही है

 $(this).find("img").attr("alt")
                  OR
  $(this).children("img").attr("alt")

लेकिन यदि आपके div में नीचे की तरह अधिक img तत्व शामिल है

<div class="mydiv">
    <img src="test.png" alt="3">
    <img src="test.png" alt="4">
</div>

तो आप दूसरे आईएमजी तत्व के alt मान को खोजने के लिए ऊपरी कोड का उपयोग नहीं कर सकते हैं। तो आप इसे आजमा सकते हैं:

 $(this).find("img:last-child").attr("alt")
                   OR
 $(this).children("img:last-child").attr("alt")

यह उदाहरण एक सामान्य विचार दिखाता है कि आप मूल वस्तु के भीतर वास्तविक वस्तु कैसे पा सकते हैं। आप अपने बच्चे की वस्तु को अलग करने के लिए कक्षाओं का उपयोग कर सकते हैं। यह आसान और मजेदार है। अर्थात।

<div class="mydiv">
    <img class='first' src="test.png" alt="3">
    <img class='second' src="test.png" alt="4">
</div>

आप इसे नीचे के रूप में कर सकते हैं:

 $(this).find(".first").attr("alt")

और अधिक विशिष्ट के रूप में:

 $(this).find("img.first").attr("alt")

आप उपरोक्त कोड के रूप में ढूंढने या बच्चों का उपयोग कर सकते हैं। बच्चों के लिए और अधिक यात्रा के लिए http://api.jquery.com/children/ और ढूंढें http://api.jquery.com/find/। उदाहरण देखें http://jsfiddle.net/lalitjs/Nx8a6/


37
2018-03-22 08:05





डीआईवी की आईडी जानने के बिना मुझे लगता है कि आप इस तरह आईएमजी का चयन कर सकते हैं:

$("#"+$(this).attr("id")+" img:first")

29
2017-11-20 19:56



यह शायद वास्तव में काम करता है लेकिन यह रुबे गोल्डबर्ग उत्तर है :) - Scott Evernden
और यदि आप उस कोड का उपयोग करने जा रहे हैं, कम से कम करें: $ ("#" + this.id + "img: first") - LocalPCGuy
@LocalPCGuy आप का मतलब था: "और यदि आप उस कोड का उपयोग करने जा रहे हैं मदद के लिए पुकारो" - gdoron
यदि आप 'यह' पहले से ही वास्तविक div का चयन करते हैं तो आप ऐसा क्यों करेंगे? इसके अलावा, यदि div में कोई आईडी नहीं है तो यह कोड काम नहीं करेगा। - Giorgio Tempesta


JQuery में एक बच्चे को संदर्भित करने के तरीके। मैंने इसे निम्नलिखित jQuery में संक्षेप में बताया:

$(this).find("img"); // any img tag child or grandchild etc...   
$(this).children("img"); //any img tag child that is direct descendant 
$(this).find("img:first") //any img tag first child or first grandchild etc...
$(this).children("img:first") //the first img tag  child that is direct descendant 
$(this).children("img:nth-child(1)") //the img is first direct descendant child
$(this).next(); //the img is first direct descendant child

28
2018-01-25 10:51





इस कोड को आज़माएं:

$(this).children()[0]

27
2017-11-20 19:51



यह काम करेगा हालांकि यह एक डोम तत्व देता है जो एक jq वस्तु नहीं है - redsquare
मुझे नहीं पता कि यह वर्तमान स्थिति का सबसे अच्छा तरीका है, लेकिन यदि आप इस मार्ग पर जाना चाहते हैं और अभी भी एक jQuery ऑब्जेक्ट के साथ समाप्त करना चाहते हैं, तो बस इसे इस तरह लपेटें: $($(this).children()[0])। - patridge
या इससे भी आसान $(this:first-child) - rémy
के बजाय $($(this).children()[x]) उपयोग $(this).eq(x) या यदि आप पहले एक चाहते हैं, बस $(this).first()। - Cristi Mihai
@ रेमी: यह वैध वाक्यविन्यास भी नहीं है। (किसी को भी नोटिस करने के लिए सभी 2 साल लग गए ...) - BoltClock♦