Question

我正在尝试使用$.each和$('<OPTION>')构建一个动态组合框，但在Firefox和其他浏览器上IE（在服务器响应后呈现数据需要3/4分钟）的速度非常慢没关系。

这是我构建组合的代码

var sel = ('#myDynCmb');
$.each(dataCollection, function(key,_value) {
    sel.append($("<OPTION>").val(key).text(_value));
});

任何帮助表示感谢。

Answer 1

Dom操纵通常很慢，特别是当你附加到dom时。

一个好的做法是将所有html放入var并将此var的内容附加到dom，这会导致一个domopération，这会更快

var htmlToAppend = "<select>";
$.each(dataCollection, function(key,_value) {
    select += "<option value="+key+">"+_value+"</option>";
});
htmlToAppend += "</select>";
$('#myDynCmb').empty().append(htmlToAppend);

像这样的东西

Answer 2

它可能是IE上的渲染问题（通常在DOM操作上很慢）。

您可以尝试这样的事情：

var dummyList = $("<select />");
$.each(dataCollection, function(key,_value) {
    dummyList.append($("<option />").val(key).text(_value));
});
$('#myDynCmb').empty().append(dummyList.find('option'));

因此，您将选项加载到虚拟列表（不在DOM中），然后将所有元素添加到列表中（在DOM中）。

Answer 3

尝试所有的解决方案，但它仍然令人尴尬的慢，所以我必须将它切换到经典的JavaScript，新的选项，它现在超级快

jQuery $ .each真的很慢

3 个答案: