Putting elements in an array?

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开发者_如何学C 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!

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.

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]);
});

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.

$('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.
});