CODEWITHSUNDEEP
javascriptjqueryhtml
supersize
supersize

Reputation: 14773

jquery objects in array are undefined

I'm creating loads of random divs and append them into the body:

var cubes    = [], 
allCubes  = ''
for(var i = 0; i < 150; i++) {
    var randomleft = Math.floor(Math.random()*1000),
        randomtop = Math.floor(Math.random()*1000);
    allCubes += '<div id="cube'+i+'" style="position: absolute; border: 2px #000 solid; left: '+randomleft+'px; top: '+randomtop+'px; width: 15px; height: 15px;"></div>';
    cubes.push($('#cube'+i));
}
$('body').append(allCubes);

later then I want to select a specific array element (which are jquery objects as seen above) in a click handler:

 $('#trigger').click(function() { 
     console.log(cubes[1].attr('id'));
});

and I throws me undefined. Why?

Upvotes: 0

Views: 184

Answers (3)

jfriend00
jfriend00

Reputation: 707178

You are trying to create:

cubes.push($('#cube'+i));

before the #cubeX item is in the DOM so the jQuery object you create and put in your array has nothing in it because it couldn't find #cubeX in the DOM at the time you created your jQuery object.

I would suggest you put a common class on the added items and change your code to this:

allCubes  = ''
for(var i = 0; i < 150; i++) {
    var randomleft = Math.floor(Math.random()*1000),
        randomtop = Math.floor(Math.random()*1000);
    allCubes += '<div id="cube'+ i + '" class="cube" style="position: absolute; border: 2px #000 solid; left: '+randomleft+'px; top: '+randomtop+'px; width: 15px; height: 15px;"></div>';
}
$('body').append(allCubes);

Then, whenever you want to get all the cube items, you can just use this:

$(".cube")

and you don't need to store them permanently in an array. Just fetch them when needed.

If you want the attribute off the second one, you can do this:

$('#trigger').click(function() { 
     console.log($(".cube").eq(1).attr('id'));
});

Upvotes: 0

PSL
PSL

Reputation: 123739

Because you are appending the elements only later point in time, you are creating a jquery object before that with the selector which will fetch nothing (since the element is not yet in DOM). Instead just save the id in the array and construct the object later.

var cubes    = [], 
allCubes  = ''
for(var i = 0; i < 150; i++) {
    var randomleft = Math.floor(Math.random()*1000),
        randomtop = Math.floor(Math.random()*1000);
    allCubes += '<div id="cube'+i+'" style="position: absolute; border: 2px #000 solid; left: '+randomleft+'px; top: '+randomtop+'px; width: 15px; height: 15px;"></div>';
    cubes.push('#cube'+i); //just save the id
}
$('body').append(allCubes);

and

  $('#trigger').click(function() { 
      console.log(cubes[1]); 
      //create object as
      var $cube = $(cubes[1]);
  });

or do:

    var cubes  = []; 
    for(var i = 0; i < 150; i++) {
        var randomleft = Math.floor(Math.random()*1000),
            randomtop = Math.floor(Math.random()*1000);
        cubes.push($('<div id="cube'+i+'" style="position: absolute; border: 2px #000 solid; left: '+randomleft+'px; top: '+randomtop+'px; width: 15px; height: 15px;"></div>'));
    }
    $('body').append(cubes);

and

      $('#trigger').click(function() { 
          console.log(cubes[1].attr('id')); 
       });

Demo

Upvotes: 2

abhirathore2006
abhirathore2006

Reputation: 3745

PSL is right. alternatively just append the code everytime 

randomtop = Math.floor(Math.random()*1000);
$('body').append('<div id="cube'+i+'" style="position: absolute; border: 2px #000 solid; left:    '+randomleft+'px; top: '+randomtop+'px; width: 15px; height: 15px;"></div>');
cubes.push($('#cube'+i));

Upvotes: 0

Related Questions