Ich habe ein ähnliches Layout:
<div id="..."><img src="..."></div>
und möchte einen jQuery-Selektor verwenden, um das untergeordnete img
innerhalb des div
beim Klicken auszuwählen.
Um das div
zu erhalten, habe ich diesen Selektor:
$(this)
Wie kann ich das Kind img
mit einem Selektor bekommen?
Der jQuery-Konstruktor akzeptiert einen zweiten Parameter namens context
, mit dem der Kontext der Auswahl überschrieben werden kann.
jQuery("img", this);
Das ist dasselbe wie .find()
wie folgt:
jQuery(this).find("img");
Wenn die gewünschten Bilder nur direkte Nachkommen des angeklickten Elements sind, können Sie auch .children()
verwenden:
jQuery(this).children("img");
Sie könnten auch verwenden
$(this).find('img');
das würde alle img
s 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>
$(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>