Question

First off thanks for any help provided.

I have an array/loop issue. I’m trying to loop through the div’s below and store the attributes in an array to be referenced later. When I test my alert in the browser I don’t get the value of my attribute. I’m only testing it with the data-id attribute for now, but would like to have access to all the attributes by referencing the index/key. I’ve been at this for 2 day trying everything I can think of. for loops, $.each(), etc…

HTML

<div class="image_fullsize" data-count="1" data-id="183" data-title="Title of Gallery" data-description="description 1" data-photo="http://to-image1.jpg" data-credit="photo-credit1"></div>

<div class="image_fullsize" data-count="2" data-id="184" data-title="Title of Gallery" data-description="description 2" data-photo="http://to-image2.jpg" data-credit="photo-credit2"></div>

<div class="image_fullsize" data-count="3" data-id="185" data-title="Title of Gallery" data-description="description 3" data-photo="http://to-image3.jpg" data-credit="photo-credit3"></div>

Here is my javascript

var myArray = [];

$('.image_fullsize').each(function(index) {
   myArray += $(this).attr('data-id');
    //alert (myArray);
  });

alert (myArray[2]);

Answer 1

You could do:

var myArray = [];
$('.image_fullsize').each(function(index) {
   myArray.push($(this).data('id'));

  });

alert (myArray[2]);

In javascript arrays have a push() method that adds what you pass to it to the array

fiddle here: http://jsfiddle.net/NbKhT/