Reputation: 245
I have a question. I'll post the HTML first, I know you shouldn't use tables for designing and stuff like that. But it's for learning purposes only.
<table id="placeholder">
<tr>
<td><img src="img/1.jpg"/></td>
<td><img src="img/2.jpg"/></td>
<td><img src="img/3.jpg"/></td>
</tr>
<tr>
<td><img src="img/4.jpg"/></td>
<td><img src="img/5.jpg"/></td>
<td><img src="img/6.jpg"/></td>
</tr>
<tr>
<td><img src="img/7.jpg"/></td>
<td><img src="img/8.jpg"/></td>
<td><img src="img/9.jpg"/></td>
</tr>
<tr>
<td><img src="img/10.jpg"/></td>
<td><img src="img/11.jpg"/></td>
<td><img src="img/12.jpg"/></td>
</tr>
<tr>
<td><img src="img/10.jpg"/></td>
<td><img src="img/11.jpg"/></td>
<td><img src="img/12.jpg"/></td>
</tr>
</table>
Is it possible to put all the IMG's in an array?
That way I can easily fadeOut the images I want.
Let say I want to get rid of the 5th images, I can just do something like:
images[4].fadeOut("slow");
Or something like that.
Is it possible to do this? Or is there a better way to do this?
I've already tried var images = $('td > img');
but that didn't work (or i'm doing something wrong). I'm also searching the internet for ways to do it, but I haven't found anything yet that could help me. Hopefully you might?
Thanks in advance!
Upvotes: 0
Views: 334
Reputation: 817238
You can select all images with
var $images = $('#placeholder img');
If you now want to select a specific image, you can use .eq()
[docs]:
$images.eq(4).fadeOut();
$images[4]
works too, but it does not return a jQuery object, but the corresponding DOM element. Hence you cannot call fadeOut
on it directly.
Without jQuery, you can get all the images with getElementsByTagName
[docs]:
var images = document.getElementById('placeholder').getElementsByTagName('img');
This gives you an array (actually a NodeList
) of DOM elements and again you cannot directly call the jQuery method fadeOut
on them.
Upvotes: 5
Reputation: 1245
$('td > img')
returns not an array, but a jQuery object. So you can use it as so:
$('td > img').each(function(index, imageElement) {
// Do logic based on the index or something else.
});
Upvotes: 0
Reputation: 8704
It would be absolutely great if you could do this, but you can't. You'd like to be able to say <td><img src=imagearray[5]><td>
but html and css don't allow it. You can, however, give each of the <td>
s a class, store the images for each class as background-image:
s, and fade those guys.
EDIT: oops, didn't see the jquery tag.
Upvotes: 0
Reputation: 26627
Your code should work, e.g.
var imgs = $("#placeholder td > img");
console.log (imgs[0]);
Your JS is probably loading before the page loads, so you need to put it in jQuery's document ready function:
$(function() {
var imgs = $("#placeholder td > img");
console.log (imgs[0]);
});
Upvotes: 0