CODEWITHSUNDEEP
javascriptjqueryarrays
Milaan
Milaan

Reputation: 245

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 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

Answers (4)

Felix Kling
Felix Kling

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

Nicolae Albu
Nicolae Albu

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

Pete Wilson
Pete Wilson

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

bcoughlan
bcoughlan

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

Related Questions