जवाबों:
JQuery कंस्ट्रक्टर एक 2 पैरामीटर को स्वीकार करता है context, जिसे चयन के संदर्भ को ओवरराइड करने के लिए उपयोग किया जाता है।
jQuery("img", this);जो .find()इस तरह का उपयोग करने के समान है :
jQuery(this).find("img");यदि आप चाहते हैं कि इमल्स केवल क्लिक किए गए तत्व के प्रत्यक्ष वंशज हैं, तो आप भी उपयोग कर सकते हैं .children():
jQuery(this).children("img");आप भी इस्तेमाल कर सकते हैं
$(this).find('img');जो सब वापस आ जाएगा imgकि वंशज हैंdiv
$(this).children('img')कि बेहतर होगा। उदाहरण के लिए, <div><img src="..." /><div><img src="..." /></div></div>संभवतया उपयोगकर्ता प्रथम-स्तरीय imgs खोजना चाहता है।
यदि आपको पहली बार imgउतरने की आवश्यकता है, तो आप बिल्कुल एक स्तर पर हैं, तो आप कर सकते हैं
$(this).children("img:first").children()वह जगह है जहां "बिल्कुल एक स्तर नीचे" आता है और :firstजहां "पहला" आया है।
.find()करने के बजाय.children()
thisपहले से ही <div>युक्त करने के लिए एक संदर्भ था <img>, हालांकि अगर आपके पास संदर्भ से अलग होने के लिए टैग के कई स्तर हैं, तो आप निश्चित रूप से एक से अधिक children()कॉल की रचना कर सकते हैं
यदि आपका DIV टैग IMG टैग के तुरंत बाद आता है, तो आप इसका उपयोग भी कर सकते हैं:
$(this).next();प्रत्यक्ष बच्चों है
$('> .child-class', this)आप माता-पिता के सभी img तत्व को नीचे की तरह पा सकते हैं
$(this).find('img') or $(this).children('img')यदि आप विशिष्ट img तत्व चाहते हैं, तो आप इस तरह लिख सकते हैं
$(this).children('img:nth(n)')
// where n is the child place in parent list start from 0 onwardsआपके div में केवल एक img तत्व है। तो इसके लिए नीचे सही है
$(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>तब आप दूसरे img तत्व का अधिकतम मूल्य ज्ञात करने के लिए ऊपरी कोड का उपयोग नहीं कर सकते। तो आप यह कोशिश कर सकते हैं:
$(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/
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 childDIV की आईडी को जाने बिना मुझे लगता है कि आप इस तरह से IMG का चयन कर सकते हैं:
$("#"+$(this).attr("id")+" img:first")इस कोड को आज़माएं:
$(this).children()[0]$($(this).children()[0]):।
$(this:first-child)
$($(this).children()[x])उपयोग के बजाय $(this).eq(x)या यदि आप पहले वाला चाहते हैं, तो बस $(this).first()।
आप निम्न विधियों में से किसी एक का उपयोग कर सकते हैं:
1 खोजें ():
$(this).find('img');2 बच्चे():
$(this).children('img');jQuery का eachएक विकल्प है:
<div id="test">
<img src="testing.png"/>
<img src="testing1.png"/>
</div>
$('#test img').each(function(){
console.log($(this).attr('src'));
});आप माता-पिता के भीतर उपलब्ध बाल तत्वों को संदर्भित करने के लिए चाइल्ड सेलेकोर का उपयोग कर सकते हैं ।
$(' > img', this).attr("src");और नीचे यदि आपके पास संदर्भ नहीं है $(this)और आप अन्य फ़ंक्शन से imgउपलब्ध संदर्भ लेना चाहते हैं div।
$('#divid > img').attr("src");यहां एक कार्यात्मक कोड है, आप इसे चला सकते हैं (यह एक सरल प्रदर्शन है)।
जब आप DIV पर क्लिक करते हैं तो आपको कुछ अलग तरीकों से छवि मिलती है, इस स्थिति में "यह" DIV है।
$(document).ready(function() {
// When you click the DIV, you take it with "this"
$('#my_div').click(function() {
console.info('Initializing the tests..');
console.log('Method #1: '+$(this).children('img'));
console.log('Method #2: '+$(this).find('img'));
// Here, i'm selecting the first ocorrence of <IMG>
console.log('Method #3: '+$(this).find('img:eq(0)'));
});
});.the_div{
background-color: yellow;
width: 100%;
height: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my_div" class="the_div">
<img src="...">
</div>आशा है ये मदद करेगा!
आपके <img>अंदर 0 से कई टैग हो सकते हैं<div> ।
एक तत्व खोजने के लिए, एक का उपयोग करें .find() ।
अपने कोड को सुरक्षित रखने के लिए, a का उपयोग करें .each()।
उपयोग करना .find()और .each()एक साथ 0 <img>तत्वों के मामले में अशक्त संदर्भ त्रुटियों को रोकता है, जबकि कई <img>तत्वों को संभालने की अनुमति भी देता है ।
// Set the click handler on your div
$("body").off("click", "#mydiv").on("click", "#mydiv", function() {
// Find the image using.find() and .each()
$(this).find("img").each(function() {
var img = this; // "this" is, now, scoped to the image element
// Do something with the image
$(this).animate({
width: ($(this).width() > 100 ? 100 : $(this).width() + 100) + "px"
}, 500);
});
});#mydiv {
text-align: center;
vertical-align: middle;
background-color: #000000;
cursor: pointer;
padding: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="mydiv">
<img src="" width="100" height="100"/>
</div>$("body").off("click", "#mydiv").on("click", "#mydiv", function() {
event.stopImmediatePropagation()ऐसा होने से रोकने के लिए मैंने तत्व का उपयोग करके घाव किया ।
$(document).ready(function() {
// When you click the DIV, you take it with "this"
$('#my_div').click(function() {
console.info('Initializing the tests..');
console.log('Method #1: '+$(this).children('img'));
console.log('Method #2: '+$(this).find('img'));
// Here, i'm selecting the first ocorrence of <IMG>
console.log('Method #3: '+$(this).find('img:eq(0)'));
});
});.the_div{
background-color: yellow;
width: 100%;
height: 200px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="my_div" class="the_div">
<img src="...">
</div>आप उपयोग कर सकते हैं
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
$(this).find('img');
</script>