How to take an element class, assign them strings from an array and return them as attributes in jQuery?

Question

I have a repeated class of .fancybox contained within image maps.

<map name="Map1" id="Map1">
  <area shape="rect" coords="609,235,834,335" href="about.html" class="fancybox" rel="iframe" />
  <area shape="rect" coords="649,546,807,565" href="info.html" class="fancybox" rel="iframe" />
  <area shape="rect" coords="670,566,781,582" href="help.html" class="fancybox" rel="iframe" />
</map>

<map name="Map2" id="Map2">
   <area shape="rect" coords="609,235,834,335" href="contact.html" class="fancybox" rel="iframe" />
   <area shape="rect" coords="649,546,807,565" href="comments.html" class="fancybox" rel="iframe" />
</map>

I then have an array in jQuery where I want to add the Title attribute. I know it can added in the HTML, but I need it fed by this array clientside as the image maps are generated by the server side CMS that I can't edit.

$(document).ready(function() {
    var mapDetails = [   
        //Map1   
        "About Page",
        "Information",
        "Get Help",
        //Map2
        "Contact Me",
        "Post Comments"
        ]; 

   $('.fancybox').each(function() {
    $(this).attr('title', mapDetails[$(this).index()]); 
   })
});

The problem I have is that on Map2 it starts from the beginning of the array again instead of carrying on in the array as the fourth .fancybox on the page. I'm assuming it's because they have different parent elements. Can I take all the .fancybox elements, assign them the titles from the array and update the HTML with jQuery so that all the .fancybox classes on the page are assigned from the array in order they appear?

I have also tried using the 'area' selector with the same result:

   $('area').each(function() {
    $(this).attr('title', mapDetails[$(this).index()]); 
   })

You should use the index argument passed to the each callback. — Manuel Leuenberger
– Manuel Leuenberger, Commented Mar 16, 2012 at 10:15

Frédéric Hamidi · Accepted Answer · 2012-03-16 10:16:03Z

2

Since you're calling index() without arguments, it returns the index of each element relative to its siblings. Therefore, that index will "reset" when going from one <map> element to another.

You can use the index argument provided by each() instead:

$(".fancybox").each(function(index) {
    $(this).attr("title", mapDetails[index]);
});

That way, the index will keep incrementing for each element and will not reset between maps.

answered Mar 16, 2012 at 10:16

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

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

1 Comment

JayDee Over a year ago

You're a legend!! Thank you, I'm starting to learn arrays and jQuery - and that explains why I've had so many problems the last few hours with this! Really appreciate such a quick and informative answer. Thanks again.

Nicola Peluchetti · Accepted Answer · 2012-03-16 10:17:10Z

1

You should use the index of each()

   $('.fancybox').each(function(index, el) {
      $(this).attr('title', mapDetails[index]); 
   })

answered Mar 16, 2012 at 10:17

Nicola Peluchetti

76.9k32 gold badges150 silver badges197 bronze badges

2 Comments

JayDee Over a year ago

Thanks Nicola, what is the el for in (index, el)?

Nicola Peluchetti Over a year ago

@JayDee it's the current element of the iteration (you could also use this to reference the current element of the iteration)

Collectives™ on Stack Overflow

How to take an element class, assign them strings from an array and return them as attributes in jQuery?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related