Putting elements in an array?

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!

Felix Kling · Accepted Answer · 2011-07-16 17:55:13Z

5

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.

edited Jul 16, 2011 at 17:55

answered Jul 16, 2011 at 17:48

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Milaan Over a year ago

Thanks man! You really helped me out! I was searching for this at least for 2 hours! Thanks for the fast reply! It works great! Awesome!

bcoughlan · Accepted Answer · 2011-07-16 17:52:11Z

0

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

answered Jul 16, 2011 at 17:52

bcoughlan

26.7k20 gold badges96 silver badges149 bronze badges

2 Comments

Milaan Over a year ago

Thanks for youre answer and youre time! The answer above workes perfectly, so I'll probably use that one :) But thank you!

Milaan Over a year ago

I don't know, I did have the jQuery document.ready function(). But well, it works now... So thanks everyone!

Pete Wilson · Accepted Answer · 2011-07-16 17:52:13Z

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.

answered Jul 16, 2011 at 17:52

Pete Wilson

8,7246 gold badges42 silver badges52 bronze badges

Comments

Nicolae Albu · Accepted Answer · 2011-07-16 17:52:41Z

0

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

answered Jul 16, 2011 at 17:52

Nicolae Albu

1,2456 silver badges6 bronze badges

Collectives™ on Stack Overflow

Putting elements in an array?

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related