Question

我正在创建大量随机div并将它们附加到正文中：

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);

稍后我想在点击处理程序中选择一个特定的数组元素（如上所示为jquery对象）：

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

我扔了undefined。为什么呢？

Answer 1

因为您仅在稍后的时间点附加元素，所以您之前使用选择器创建一个jquery对象，该选择器将不提取任何内容（因为该元素尚未在DOM中）。而只是将id保存在数组中并稍后构造对象。

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);

和

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

或做：

    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);

和

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

<强> Demo

Answer 2

PSL是对的。或者只是每次附加代码

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));

Answer 3

您正在尝试创建：

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

在#cubeX项目位于DOM之前，因此您创建并放入数组的jQuery对象中没有任何内容，因为在您创建自己的DOM时，它无法在DOM中找到#cubeX jQuery对象。

我建议你在添加的项目上添加一个公共类，并将代码更改为：

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);

然后，只要你想获得所有立方体项目，你就可以使用它：

$(".cube")

并且您不需要将它们永久存储在数组中。只需在需要时获取它们。

如果您希望该属性不在第二个属性中，您可以执行以下操作：

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

数组中的jquery对象是未定义的

3 个答案: