Question

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!

Answer 1

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.