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




jquery jquery-selectors (13)

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

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

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

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

$(this)

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


आप माता-पिता के भीतर उपलब्ध बाल तत्वों के संदर्भ में बाल सेलेकोर का उपयोग कर सकते हैं।

$(' > img', this).attr("src");

और नीचे दिया गया है यदि आपके पास $(this) संदर्भ नहीं है और आप अन्य फ़ंक्शन से div भीतर उपलब्ध img को संदर्भित करना चाहते हैं।

 $('#divid > img').attr("src");

jQuery का each एक विकल्प है:

<div id="test">
    <img src="testing.png"/>
    <img src="testing1.png"/>
</div>

$('#test img').each(function(){
    console.log($(this).attr('src'));
});

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

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

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

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

जो div वंशज हैं जो सभी img एस वापस आ जाएगा


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

$(this).children()[0]

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

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

आप नीचे दिये गये पैरेंट 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/


इसके अलावा यह काम करना चाहिए:

$("#id img")

$(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>


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

jQuery("img", this);

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

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

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

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

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

$(this).next();

आपके पास <div> अंदर कई <img> टैग हो सकते हैं।

तत्व खोजने के लिए, .find() उपयोग करें।

अपना कोड सुरक्षित रखने के लिए, .each() उपयोग करें।

.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>


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




this