jquery - 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()，它会按预期输出。

是什么赋予了？

做了一个小提琴。完全可重现（至少在 Chrome 21 中）。

Answer 1

不知道发生了什么，尝试了一堆我认为可能会造成麻烦的事情并且到目前为止找不到解决方案，但这就是我将如何做到的并且它有效。

var options = [
    [1, "one"],
    [2, "two"],
    [3, "three"]
];

var list = [];
for (var i in options) {
    list.push(
        '<option value="'+ options[i][0] +'">'+
            options[i][1] +            
        '</option>'        
    );
}

$('.sel').empty().append(
    '<option>&ndash; Not selected &ndash;</option>'+
    list.join('')
);

演示：http: //jsfiddle.net/elclanrs/U9agP/4/

Answer 2

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

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

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

我建议制作opt_list成一个字符串，而不是一个 jQuery 对象。

Answer 3

需要克隆列表。http://jsfiddle.net/mnbayazit/U9agP/5/

它将元素从一个移动<select>到另一个，因为它们是参考。

Answer 4

根据 jQuery 文档，对每个 jQuery 对象的调用与在泛型数组上使用的调用略有不同。

尝试丢失el并this改用。

$(this).html(opt_list);

http://api.jquery.com/each/