0

我正在创建大量随机 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。为什么？

4

3 回答 3

2

因为您只是在稍后的时间点附加元素，所以您正在使用选择器创建一个 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')); 
       });

演示

于 2013-10-24T00:54:55.543 回答
0

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));
于 2013-10-24T01:00:51.450 回答
0

您正在尝试创建：

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

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

我建议您在添加的项目上放置一个通用类并将您的代码更改为：

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'));
});
于 2013-10-24T01:10:05.850 回答