Wie erhält man die Kinder des $(this)-Selektors?

Question

Ich habe ein ähnliches Layout wie dieses:

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

und möchte einen jQuery-Selektor verwenden, um das Kind auszuwählen img innerhalb der div anklicken.

Um die div Ich habe diesen Selektor:

$(this)

Wie kann ich das Kind dazu bringen img einen Selektor verwenden?

Answer 1

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

Answer 2

Wenn Ihr img genau das erste Element innerhalb von div ist, versuchen Sie

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

Answer 3

Mit nativem Javascript können Sie

wenn Sie mehr als ein Bild-Tag haben, verwenden Sie

this.querySelectorAll("img")

wenn nur ein Bild-Tag, dann wir

this.querySelector("img")

Answer 4

Sie könnten verwenden

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