$ (මෙය) තේරීම්කරුගේ දරුවන් ලබා ගන්නේ කෙසේද?

මට මේ හා සමාන පිරිසැලසුමක් ඇත:

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

සහ ක්ලික් කිරීම imgතුළ දරුවා තෝරා ගැනීමට jQuery තේරීමක් භාවිතා කිරීමට කැමතියි div.

ලබා ගැනීම සඳහා div, මට මෙම තේරීම් කාරකය ඇත:

$(this)

imgතේරීම් කාරකයක් භාවිතා කරමින් දරුවා ලබා ගන්නේ කෙසේද ?

JQuery ඉදිකිරීම්කරු 2 වන පරාමිතිය පිළිගන්නා අතර contextඑය තේරීමේ සන්දර්භය අභිබවා යාමට භාවිතා කළ හැකිය.

jQuery("img", this);

මේ ආකාරයට භාවිතා කිරීමට .find()සමාන වන්නේ:

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

ඔබ කැමති imgs ක්ලික් කළ මූලද්‍රව්‍යයේ des ජු පැවත එන්නන් පමණක් නම් , ඔබට ද මෙය භාවිතා කළ හැකිය .children():

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

ඔබට ද භාවිතා කළ හැකිය

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

එමඟින් imgපැවත එන සියල්ලන්ම ආපසු ලබා දෙනු ඇතdiv

ඔබට පළමු imgමට්ටම හරියටම ලබා ගැනීමට අවශ්‍ය නම් , ඔබට එය කළ හැකිය

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

ඔබගේ DIV ටැගය වහාම IMG ටැගය අනුගමනය කරන්නේ නම්, ඔබට මෙයද භාවිතා කළ හැකිය:

$(this).next();

මෙම සෘජු ළමුන්

$('> .child-class', this)

පහත දැක්වෙන පරිදි මාපිය කොට් div ාශයේ සියලුම 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 මූලද්‍රව්‍යයේ 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/

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

ඩීඅයිවී හි හැඳුනුම්පත නොදැන මම ඔබට මේ ආකාරයට IMG තෝරා ගත හැකිය:

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

මෙම කේතය උත්සාහ කරන්න:

$(this).children()[0]

ඔබට පහත සඳහන් ක්‍රම වලින් එකක් භාවිතා කළ හැකිය:

1 සොයා ():

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

දරුවන් දෙදෙනෙකු ():

$(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");

මෙයද ක්‍රියාත්මක විය යුතුය:

$("#id img")

මෙන්න ක්‍රියාකාරී කේතයක්, ඔබට එය ක්‍රියාත්මක කළ හැකිය (එය සරල නිරූපණයකි).

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

මූලද්රව්යයක් සොයා ගැනීමට, a භාවිතා කරන්න .find().

ඔබේ කේතය ආරක්ෂිතව තබා ගැනීමට, a භාවිතා කරන්න .each().

මූලද්රව්ය 0 ක් සම්බන්ධයෙන් ශුන්ය යොමු දෝෂයන් භාවිතා කිරීම .find()සහ .each()එකට භාවිතා කිරීම වළක්වන <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>

ඔබට භාවිතා කළ හැකිය

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
 $(this).find('img');
</script>

ඔබේ img හරියටම div තුළ පළමු අංගය නම් උත්සාහ කරන්න

$(this.firstChild);

$( "#box" ).click( function() {
  let img = $(this.firstChild);
  console.log({img});
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="box"><img src="https://picsum.photos/seed/picsum/300/150"></div>