Wie bekommt man die Kinder des $ (this) Selektors?

Sie könnten auch verwenden

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

das würde alle imgs zurückgeben, die Nachkommen des div sind

Wenn Sie das erste img benötigen, das genau eine Stufe niedriger ist, können Sie dies tun

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

Wenn auf Ihr DIV-Tag unmittelbar das IMG-Tag folgt, können Sie auch Folgendes verwenden:

$(this).next();

Die direkten Kinder sind

$('> .child', this)

Du findest alle img Elemente von parent div wie unten

$(this).find('img') or $(this).children('img')

Wenn Sie ein bestimmtes img-Element möchten, können Sie dies so schreiben

$(this).children('img:nth(n)')  
// where n is the child place in parent list start from 0 onwards

Dein div enthält nur ein img Element. Also dafür ist unten richtig

 $(this).find("img").attr("alt")
                  OR
  $(this).children("img").attr("alt")

Aber wenn dein div mehr img Elemente wie unten enthält

<div class="mydiv">
    <img src="test.png" alt="3">
    <img src="test.png" alt="4">
</div>

dann können Sie den oberen Code nicht verwenden, um den Alt-Wert des zweiten img-Elements zu ermitteln. So können Sie dies versuchen:

 $(this).find("img:last-child").attr("alt")
                   OR
 $(this).children("img:last-child").attr("alt")

Dieses Beispiel zeigt eine allgemeine Idee, wie Sie das tatsächliche Objekt im übergeordneten Objekt finden können. Sie können Klassen verwenden, um Ihr untergeordnetes Objekt zu unterscheiden. Das ist einfach und macht Spaß. d.h.

<div class="mydiv">
    <img class='first' src="test.png" alt="3">
    <img class='second' src="test.png" alt="4">
</div>

Sie können dies wie folgt tun:

 $(this).find(".first").attr("alt")

und spezieller als:

 $(this).find("img.first").attr("alt")

Sie können find oder children als obigen Code verwenden. Weitere Informationen finden Sie unter Children http://api.jquery.com/children/ und Find http://api.jquery.com/find/ . Siehe Beispiel http://jsfiddle.net/lalitjs/Nx8a6/

Möglichkeiten, in jQuery auf ein untergeordnetes Element zu verweisen. Ich habe es in der folgenden jQuery zusammengefasst:

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

Versuchen Sie diesen Code:

$(this).children()[0]

Ohne die ID des DIV zu kennen, könnte man das IMG wie folgt auswählen:

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

Sie können eine der folgenden Methoden anwenden:

1 find ():

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

2 Kinder ():

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

jQueries each ist eine Option:

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

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

Mit Child Selecor können Sie auf die untergeordneten Elemente verweisen, die im übergeordneten Element verfügbar sind.

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

Das Folgende ist, wenn Sie nicht auf $(this) verweisen und auf img verweisen möchten, das innerhalb einer div von einer anderen Funktion verfügbar ist.

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

Auch das sollte funktionieren:

$("#id img")

Hier ist ein Funktionscode, den Sie ausführen können (eine einfache Demonstration).

Wenn Sie auf den DIV klicken, erhalten Sie das Bild von verschiedenen Methoden. In dieser Situation ist dies der 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>

Ich hoffe es hilft!

Möglicherweise haben Sie 0 bis viele <img> Tags in Ihrem <div>.

Verwenden Sie zum Suchen eines Elements .find().

Verwenden Sie zum Schutz Ihres Codes .each().

Wenn Sie .find() und .each() zusammen verwenden, werden Nullreferenzfehler im Fall von 0 <img> -Elementen vermieden, und es können auch mehrere <img> -Elemente verarbeitet werden.

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