jQuery kodu döngü sonrasında div html elemanı, garip davranışlar İşte

Question

edilir ekleyin:

$('#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> daima döngü için yukarıda eklenir. Örneğin sadece iş seçimi ile değiştirirsem, sonunda olması gereken yere eklenir. Bu neden oluyor ve bunu nasıl düzeltebilirim?

Answer 1

jQuery böyle DOM üretecektir inanıyoruz:

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

otomatik ilk .append() sonra <select> kapatıyor beri. Daha sonra ne yapıyorsunuz seçenekleri eklenmiş olan <select> yerine <div id="#date"/> ekliyor. Son kapanış </select> aslında bir şey yapacak sanmıyorum.Gerçekten eklemek kullanmak istiyorsanız

JavaScript doğru düğüme seçenekleri katacak aşağıdaki:

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

mevcut HTML varsayarsak: ekleme beri

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

Ancak bu bir yükü tabi gelmez iki kez meydana geliyor. Daha hızlı yaklaşım zaten ShankarSangoli

Answer 2

Eğer kendi yolunuza geçmek istiyorsanız - örneğin, içinde html kodlu dize değişkeni oluşturun ve onu ekleyin.

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) 

veya burada What is the best way to add options to a select from an array with jQuery?

ps bak: İlk ekleme otomatik seçme etiketi kapanış, belgenin içine geçerli bir DOM yapısını oluşturmaya çalışır. Bu yüzden ikincisi yaratılan seçime seçenek eklemez.

başka bir olası yolu, yukarıdaki linke dayalı, dinamik olarak html oluşturmak için doğru bir yol değildir

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

Answer 3

olduğunu. Tam işaretlemeyi bir kerede bir diziye koyarak ve ardından jQuery'a sağlamanız gerekir.

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

sonra kodunuzda ilk $('#date').append('<select id="date">... sonra bu olacak: Bu

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 4

bende sende taban HTML hayal deneyin şuna benzer

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

hangi aynı kimlik özelliğine sahip 2 öğedir.

Kimlik özniteliği yaylalar gibidir, yalnızca bunlardan biri olmalıdır (her sayfada).

$('#date').append... sekansı beklenmedik biçimde çalışır ve 3. sırada da beklenmedik şekilde çalışmaz. Çünkü hangi #date numaralı telefona başvurduğunu tahmin edemezsiniz.

Ayrıca, diğer yanıtların da belirttiği gibi, yalnızca 1 ekleme yapmak için oluşturursanız daha iyi olacaktır, çünkü seçicilerin çok kez çağrılması (özellikle döngü içinde), bir performans vuruşu.

Answer 5

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

tarafından cevap tüm seçenekler içinden