jQuery not reading correct HTML attribute value

Question

I'm using a responsive image map jQuery plugin. On page load and on window resize, I'm reading the coordinate values of the responsive image maps and overlaying an on top that scales with each image map.

This works fine on window resize, but on page load I'm having a problem reading the correct coordinate values.

I'm extracting the values like:

var test = jQuery('#imagemap').children('area')[i];
console.log(test);

The console will output: <area id="area0" shape="rect" coords="0,0,32,32">

But when I run: console.log(test.coords); to extract the "0,0,32,32" coords, I get:

0,0,40,40

0,0,40,40 is the default coord position before the response image map plugin scales it down.

Why is there a conflict of values?

Answer 1

I would try doing it as pure jQuery (the jQuery way I suppose) and seeing how it works.

jQuery('#imagemap').children('area').each(function(){
    console.log($(this).attr('coords'));
});

Incase you're not familiar this code loops through "each" of the area items and outputs the coords attribute. This is instead of using a for loop (or whatever you're currently doing)

OR if you wanted to stay with your method you could use eq(i) instead of [i] and the .attr method to keep it all jQuery... like this:

var test = jQuery('#imagemap').children('area').eq(i);
console.log(test.attr('coords'));