Question

我有一个我构建的jQuery对象数组，并且附加了事件。

var obs = [];
for(var i=0;i<100;i++) {
  var j = jQuery('<div></div>');
  j.click(function() { console.log('Clicked ' + i); });
  obs.push(j);
}

我的HTML是：

<div id="replaceme"></div>

如何使用数组中的所有jQuery对象替换页面上的div？我不想连接他们的HTML，因为我想保留事件处理程序。

Answer 1

您可以通过执行以下操作将元素替换为jQuery元素数组：

$(theElement).replaceWith(theArryaOfjQueryElements);

在您的情况下，这是：

$('#replaceme').replaceWith(objs);

请参阅jQuery.replaceWith()方法。

顺便说一句，你在这里有错误：

j.click(function() { console.log('Clicked ' + i); });

这将始终打印Clicked 100。原因是您的函数关闭了对i的引用，而不是它的值。因此，如果在调用此函数之前修改i，则函数将看到i的新值。

你应该这样做：

 (function(i) {
     j.click(function() { console.log('Clicked ' + i); });
 }(i));

Answer 2

使用replaceWith jQuery方法将匹配元素集中的每个元素替换为提供的新内容。

var $obj = jQuery();//This will create an empty jQuery object
for(var i=0;i<100;i++) {
  var j = jQuery('<div></div>');
  j.click(function() { console.log('Clicked ' + i); });
  $obj.add(j);//Using add method to add the jQuery object into $obj
}

$("#replaceme").replaceWith($obj);

Answer 3

var obs = [];
for(var i=0;i<100;i++) {
    var j = jQuery('<div></div>');
    j.click(function() { console.log('Clicked ' + i); });
    obs.push(j);
}

$('#replaceme').html(objs);
/* or */
$('#replaceme').replaceWith(objs);

Answer 4

我读到，一次创建所有元素要比逐个创建要快得多。使用click函数，您可以计算所有先前的兄弟节点以获取索引：

var str = ''
for (var i = 0; i < 100; i++) {
  str += '<div></div>';
}
var elem = jQuery(str);
elem.click(function() { console.log('clicked '+jQuery(this).prevAll().length); });

jQuery('#replaceme').replaceWith(elem);

如何用jQuery对象数组替换一个DOM元素？

4 个答案: