I have a layout similar to this:
and would like to use a jQuery selector to selec
You could also use
$(this).find('img');
which would return all img
s that are descendants of the 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>
If you need to get the first img
that's down exactly one level, you can do
$(this).children("img:first")
The jQuery constructor accepts a 2nd parameter called context which can be used to override the context of the selection.
jQuery("img", this);
Which is the same as using .find() like this:
jQuery(this).find("img");
If the imgs you desire are only direct descendants of the clicked element, you can also use .children():
jQuery(this).children("img");
If your DIV tag is immediately followed by the IMG tag, you can also use:
$(this).next();
You may have 0 to many <img>
tags inside of your <div>
.
To find an element, use a .find()
.
To keep your code safe, use a .each()
.
Using .find()
and .each()
together prevents null reference errors in the case of 0 <img>
elements while also allowing for handling of multiple <img>
elements.
// 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>