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

Answer 1

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.