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

JQuery's each ist eine Möglichkeit:

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

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

Answer 2

Sie können verwenden Kind Selecor um auf die im übergeordneten Element verfügbaren untergeordneten Elemente zu verweisen.

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

Und das Folgende ist, wenn Sie keinen Bezug haben zu $(this) und Sie möchten auf Folgendes verweisen img verfügbar innerhalb einer div von anderen Funktionen.

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

Answer 3

Auch das sollte funktionieren:

$("#id img")

Answer 4

Hier ist ein funktionsfähiger Code, Sie können ihn ausführen (es ist eine einfache Demonstration).

Wenn Sie auf das DIV klicken, erhalten Sie das Bild aus verschiedenen Methoden, in dieser Situation ist "this" das 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>

Hoffentlich hilft das!

Answer 5

Sie haben vielleicht 0 zu viele <img> Tags innerhalb Ihrer <div> .

Um ein Element zu finden, verwenden Sie eine .find() .

Um Ihren Code sicher zu halten, verwenden Sie eine .each() .

Verwendung von .find() y .each() zusammen verhindert Nullreferenzfehler im Falle von 0 <img> Elemente und ermöglicht gleichzeitig den Umgang mit mehreren <img> Elemente.

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