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");
With jQuery, you use $(document).ready()
to execute something when the DOM is loaded and $(window).on("load", handler)
to execute something when all other things are loaded as well, such as the images.
The difference can be seen in the following complete HTML file, provided you have a lot of jollyrogerNN
JPEG files (or other suitable ones):
<html>
<head>
<script src="jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert ("done");
});
</script>
</head><body>
Hello
<img src="jollyroger00.jpg">
<img src="jollyroger01.jpg">
// : 100 copies of this in total
<img src="jollyroger99.jpg">
</body>
</html>
With that, the alert box appears before the images are loaded, because the DOM is ready at that point. If you then change:
$(document).ready(function() {
into:
$(window).on("load", function() {
then the alert box doesn't appear until after the images are loaded.
Hence, to wait until the entire page is ready, you could use something like:
$(window).on("load", function() {
// weave your magic here.
});
Best Answer
You may add a callback to
slideToggle
: