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

Sie finden alle img Element des übergeordneten div wie unten

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

Wenn Sie eine bestimmte img Element können Sie wie folgt schreiben

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

Ihr div enthält nur eine img Element. Daher ist das Folgende richtig

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

Aber wenn Ihr div mehr enthält img Element wie unten

<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 finden. Also 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 aktuelle Objekte innerhalb des übergeordneten Objekts finden können. Sie können Klassen verwenden, um das Objekt Ihres Kindes zu unterscheiden. Das ist einfach und macht Spaß. z.B.

<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 spezifischer als:

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

Sie können find oder children als obigen Code verwenden. Für mehr besuchen Kinder http://api.jquery.com/children/ und Finden http://api.jquery.com/find/ . Siehe Beispiel http://jsfiddle.net/lalitjs/Nx8a6/

Answer 2

Möglichkeiten, in jQuery auf ein Kind 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

Answer 3

Ohne die ID des DIVs zu kennen, könnte man das IMG so auswählen:

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

Answer 4

Probieren Sie diesen Code aus:

$(this).children()[0]

Answer 5

Sie können eine der folgenden Methoden verwenden:

1 find():

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

2 Kinder():

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