jQuery.each 和 .html 的行为不符合预期

Question

我希望这样:

$('.iat_map').each(function(i,el) {
    $(el).html(opt_list);
});

还有这个:

$('.iat_map').html(opt_list);

做同样的事情。但是，当我尝试前者时，它会清除内容而不是用 opt_list 替换它。 。 ( .iat_map 指的是一堆 <selects> )。

如果我console.log(opt_list)里面each() ，它按预期输出。

什么给了？

Made a fiddle 。完美重现(至少在 Chrome 21 中)。

Answer 1

问题是 opt_list 是一个 jQuery 对象(意味着 jQuery 将选项放入 DOM 元素中)，当您附加 jQuery 对象时，DOM 元素将从其旧位置删除并添加到其位置新地点。

这就是为什么当您使用 .each 时，您会注意到选项仅位于最后一个选择上。

显然，当您执行 $('.iat_map').html(opt_list); 时，jQuery 会在附加 DOM 元素之前克隆它们。

我建议将 opt_list 制作为字符串，而不是 jQuery 对象。