Jquery在for循环后将html元素附加到div，奇怪的行为答案

【问题标题】：Jquery append html element to div after for loop, strange behaviourJquery在for循环后将html元素附加到div，奇怪的行为
【发布时间】：2012-01-23 09:13:00
【问题描述】：

代码如下：

$('#date').append(
    '<select id="date">'+
    '<option value="0">- - SELECT - -</option>');
    for(var i in data){
    $('#date').append(
    '<option value="">'+data[i]['date_time']+'</option>');
    });
$('#date').append('</select>');

</select> 总是添加在 for 循环之上。例如，如果我将其替换为仅工作选择，则将其附加在应位于的末尾。为什么会发生这种情况，我该如何解决？

【问题讨论】：

请描述strange behaviour?
您是否考虑过在第二个附加语句之前关闭第一个附加语句？ :)
您可能有多个元素具有相同的id，这是无效的。您在#date 上调用append，然后创建一个与#date 匹配的新元素。
我遵循了其中一个答案并找到了解决方案。谢谢，我已经修复了双重身份问题（如果你没有向我提到它，它会被忽视）。 “您是否考虑过在第二个附加语句之前关闭第一个附加？”怎么关？ :)

标签： javascript jquery for-loop

【解决方案1】：

我相信 jQuery 会生成这样的 DOM：

<div id="date">
    <select id="date">
        <option value="0">- - SELECT - -</option>
    </select>
    <option value="">foo</option>
    <option value="">bar</option>
    etc...
</div>

因为它在第一个.append() 之后自动关闭<select>。之后您所做的是将 options 附加到 <div id="#date"/> 而不是附加的 <select>。我认为最后的关闭</select> 也不会真正做任何事情。

如果你真的想使用 append 下面的 JavaScript 会将选项添加到正确的节点：

// dummy data object for example
var data = new Array(new Array(), new Array());
data[0].date_time = 2011;
data[1].date_time = 2012;

var options = new Array();
$.each(data, function(index, option) {
    options.push('<option value="' + index + '">'+ option.date_time +'</option>');
});

$('<select id="date"/>').append(options.join('')).appendTo('#date');

假设现有的 HTML：

<div id="date"></div>

但是这确实会产生开销，因为追加发生了两次。更快的方法是建立 options 标记，正如 ShankarSangoli 已经回答的那样

【讨论】：

【解决方案2】：

动态创建 html 不是正确的方法。您应该通过将其放入一个数组中一次创建完整的标记，然后将其提供给jQuery。试试这个

var html = [];
html.push('<select id="date">');
html.push('<option value="0">- - SELECT - -</option>');
for(var i in data){
   html.push('<option value="">'+data[i]['date_time']+'</option>');
}
html.push('</select>');
//This selector should be some container like dateContainer
//because you have already give date as id to the above select element
$('#dateContainer').html(html.join(''));

【讨论】：

【解决方案3】：

$('#date').append($("<select/>", { name: "name"+i})
 .find('select')   
 .append($("<option/>", { value: "abc"+i}).text('cell'))   
 .append($("<option/>", { value: "abc"+i}).text('home'))   
 .append($("<option/>", { value: "abc"+i}).text('work'));

所有选项都应该包含在 select 中

【讨论】：

您仍然需要通过链接.find('select')来过滤初始选择

【解决方案4】：

我想你的基本 HTML 看起来像这样：

<div id="date"></div>

然后在您的代码中的第一个 $('#date').append('<select id="date">... 之后，您将拥有：

<div id="date"><select id="date">...</div>

这是具有相同 ID 属性的 2 个元素。

ID 属性就像高地人一样，必须只有一个（在每个页面中）。

第二个$('#date').append... 出乎意料地工作，第三个也出乎意料地不起作用。因为你无法预测他们指的是哪个#date。

另外，正如其他答案所说，如果您将其构建为仅执行 1 次追加会更好，因为多次调用选择器（尤其是在循环内）会影响性能。

【讨论】：

【解决方案5】：

如果您想按照自己的方式进行操作 - 例如，创建带有 html 代码的字符串变量，然后添加它。

data = [1, 2, 3];
var html = '<select id="date">'+
    '<option value="0">- - SELECT - -</option>';
 for(var i in data){
    html += '<option value="">'+data[i]+'</option>';
}
$('#date').append(html)

或看这里 What is the best way to add options to a select from an array with jQuery?

ps：第一个追加尝试在文档内部创建一个有效的 DOM 结构，自动关闭 select 标签。这就是为什么第二个不会将选项插入到创建的选择中的原因。

根据上面的链接，另一种可能的方法是

var sel = $('<select id="date">');
$.each(data, function(key, value) {   
       sel.append($('<option>').text(key['date_time'])); 
});
$('#date').append(sel);

【讨论】：