Jquery добавить элемент HTML в div после цикла for, странное поведение

Question

Вот код:

$('#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> всегда добавляется выше для цикла. Например, если я заменю его на «Просто работа», он добавляется в конце, где и должно быть. Почему это происходит и как я могу это исправить?

Answer 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>

Так как он автоматически закрывает <select> после первого .append(). После этого вы добавляете опции к <div id="#date"/>, а не к <select>, который был добавлен. Я не думаю, что окончательное закрытие </select> на самом деле тоже что-нибудь сделает.

Если вы действительно хотите использовать add, следующий 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

Answer 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(''));

Answer 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'));

все параметры должны быть внутри

Answer 4

Я представляю, что базовый HTML у вас выглядит примерно так:

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

тогда после первого $('#date').append('<select id="date">... в вашем коде у вас будет это:

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

, то есть 2 элемента с одинаковым атрибутом ID.

Атрибут ID похож на горцев, их должен быть только один (на каждой странице).

Секунда $('#date').append... работает неожиданно, а третья, также неожиданно, не работает. Потому что вы не можете предсказать, к чему #date они относятся.

Кроме того, как и в других ответах, будет лучше, если вы создадите его только для 1 добавления, потому что вызов селекторов так много раз (особенно внутри цикла) - это падение производительности.

Answer 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)

или посмотрите здесь Каков наилучший способ добавить опции в выборку из массива с помощью jQuery?

ps: первое добавление пытается создать действительную структуру DOM внутри документа, автоматически закрывая тег выбора. поэтому второй не будет вставлять опции в созданный выбор.

другим возможным способом, основанным на ссылке выше, является

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