jQuery Array problem

Question

I am trying to create an array images to preload by getting each of the image link in the rel attributes.

I have on a page:

<div id="gallery_thumbs">
  <a><img src="images/image-1-thumb.jpg" rel="images/image-1.jpg" /></a>
  <a><img src="images/image-2-thumb.jpg" rel="images/image-2.jpg" /></a>
  <a><img src="images/image-3-thumb.jpg" rel="images/image-3.jpg" /></a>
  <a><img src="images/image-4-thumb.jpg" rel="images/image-4.jpg" /></a>
</div>

When the page loads I need to get all the rel attributes in the #gallery_thumbs a img and append these to an array like so:

preload([ 'images/image-1.jpg', 'images/image-2.jpg', 'images/image-3.jpg', 'images/image-4.jpg']);

Can anyone help?

for formatting, just highlight the section of code and click the 101010 button up top, it'll space it over 4 spaces...and markdown will format it nicely for you. Click edit above to see how the formatting looks after I tweaked it :) — Nick Craver
– Nick Craver, Commented Nov 30, 2010 at 14:40

Nick Craver · Accepted Answer · 2010-11-30 14:30:17Z

3

You can use .map() to get an array of the strings you want, like this:

var arr = $("#gallery_thumbs img").map(function() { 
            return $(this).attr("rel"); 
          }).get();
preload(arr);

An <a> without a name or href is invalid though, why not have the href to go the image you want (which would degrade gracefully), and prevent that action in JavaScript? Your markup would look like this:

<div id="gallery_thumbs">
  <a href="images/image-1.jpg"><img src="images/image-1-thumb.jpg" /></a>
  <a href="images/image-2.jpg"><img src="images/image-2-thumb.jpg" /></a>
  <a href="images/image-3.jpg"><img src="images/image-3-thumb.jpg" /></a>
  <a href="images/image-4.jpg"><img src="images/image-4-thumb.jpg" /></a>
</div>

Making the script above simpler too:

var arr = $("#gallery_thumbs a").map(function() { return this.href; }).get();
preload(arr);

answered Nov 30, 2010 at 14:30

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

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

3 Comments

Chill Web Designs Over a year ago

This returns undefined in Firefox??

Nick Craver Over a year ago

@Chill - The first? rel is an invalid attribute, so I'd really go with the second if possible.

Chill Web Designs Over a year ago

I still can't seem to get the it to preload from the array,

Roberto Huelga · Accepted Answer · 2010-11-30 14:34:55Z

0

You can use map function:

$("img").map(function(i,e) { return $(e).attr('rel');})

answered Nov 30, 2010 at 14:34

Roberto Huelga

3243 silver badges10 bronze badges

1 Comment

Chill Web Designs Over a year ago

This seems to work but how would you convert the strings into a an array?

Collectives™ on Stack Overflow

jQuery Array problem

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related