jQuery neden belirli HTML'yi gizleyemiyor?

Kafamı anlamaya çalışan bir duvarın içine koştum. Aşağıdaki HTML vücudu atın:jQuery neden belirli HTML'yi gizleyemiyor?

<body> 
<div id="project"> 
    <h1>Hi</h1> 
    <h2>Hello</h2> 
</div> 
</body>

Ve aşağıdaki jQuery kodu:

$(function(){ 
    var h = $('#project').html(); 
    $('#project').remove(); 
    $(h).hide().appendTo('body'); 
    alert("Created HTML, hide, and appended!"); 
});

$(h).hide() kısmı jQuery Safari 4 ve Firefox 3.5 bir özel durum neden olur.

Safari:TypeError: Result of expression 'this[a].style' [undefined] is not an object.
Firefox: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0" nsresult: ...]

Sana HTML <h1> veya <h2> kaldırırsanız HTML (iki başlık sadece birini içeren değiştirmek, senaryo başarıyla çalışır. Neden?

kendiniz denemek için bu bkz http://jsbin.com/avisi/edit

Düzenleme: Aslında DOM'dan kaldırmayı ve öğeyi kaldırmaya çalışmıyorum ve HTML'yi kopyalayarak tekrar ekleyemiyorum. Bu, daha karmaşık bir kodda bulunduğum bir hata için bir test vakasıdır ve bu hatanın neden oluştuğunu anlamaya çalışıyorum. Eğer burada gösterilen şeyi gerçekleştirmek isteseydim, $('#project').remove().children().appendTo('body')

kaynak

2010-02-19 Ryan

çalışmalıdır. Ancak, aşağıdaki ile temizlemeye denemek isteyebilirsiniz:

$('#project').remove().children().appendTo('body').hide();

yıkılmış, bu

// Get the `project` container 
$('#project') 
    // Remove it from the page 
    .remove() 
    // Get its children (the h1, h2, etc) 
    .children() 
    // Append those nodes to the body 
    .appendTo('body') 
    // Hide those nodes 
    .hide();

Diğerleri .hide() o ediliyor düğüm beri sorunlara neden olduğunu öneriyorlar neler olduğunu uygulanan ana belgenin bir parçası değildir; Ancak, bu durum böyle değil. Herhangi bir düğüme başvuruda bulunduğunuz sürece, stil özelliğini (hide, show, vb. Aracılığıyla) etkileyebilirsiniz.

Denetlemek isteyebileceğiniz bir şey, $('#project')'un aslında (varsa) beklenen düğümü döndürdüğünden emin olmaktır. Aksi halde sorunlar ortaya çıkabilir. Bu yüzden Safari'de dürttüm ve probleminizi buldum. İşte geliştirici konsolundan bir döküm.

> var h = $('#project').html(); 
undefined 
> var t = $(h); 
undefined

Şimdiye kadar çok iyi. Burada undefined basitçe Burada açıklanan hata var (görünmüyorsa hangi)

> t.hide() 
ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js:131TypeError: Result of expression 'this[a].style' [undefined] is not an object.

beyanı (var ifade) geri dönüşü değerine sahip olduğu anlamına gelir.jQuery nesnesi her öğeyi incelenmesi

> t[0] 
<h1 style="display: none; ">Hi</h1>

İyi aşağıdaki hatayı ...

> t[1] 
(whitespace)

Dammit ortaya çıkaracaktır. Gerçekten mi? İşte problem. beyaz boşluk düğümleri, style özniteliğine sahiptir, bu da soruna neden olan şeydir.

> t[2] 
<h2>Hello</h2>

Bu nedenle, bu düğümleri taşımak için yalnızca bir düğümün HTML'sinin bir diğerine kopyalanması kötü bir tekniktir. Yukarıda verdiğim snippet'i kullanmanızı öneririm.

kaynak

2010-02-19 09:18:17

Bunun, söz konusu düğümleri kaldırmak ve yeniden eklemek için daha temiz bir yol olduğunu kabul ediyorum. Anlamaya çalıştığım şey (en azından Firefox 3.5 ve Safari 4'ün kopyasında), yukarıdaki kodun bir hataya neden olmasıdır. – Ryan

Nedeni buldum ve cevabımı güncelledim. –

Justin, bunu araştırdığın için teşekkürler. Eminim ki, sunucudan alınan bir HTML parçasını gizlemeye ve yerleştirmeye çalışan ilk problemimi çözmek için kullanabileceğime eminim (bu yüzden '.remove()' ... '.append()' değil bir seçenek - kaldırılacak hiçbir şey yok). – Ryan

-1

gibi bir şeyi kullanmak isterdim. Daha önce içeriği DOM'den kaldırdınız, böylece gizlenecek bir şey kalmadı. Eğer

$(h).appendTo('body').hide();

yapacağını Eğer ben Firefox'ta hata yinelenen olamaz

kaynak

2010-02-19 09:11:08 harpax

Gizlenecek bir şey var. Düğüm, belgeden kaldırıldığından, varolmadığı anlamına gelmez ve üzerinde stil manipülasyonları yapılamaz. –

doğru, ne kadar hata olduğunu ne kadar anlayamıyorum gerçi o zaman .. – harpax

Güncellenmiş cevabımı görün. –

$ (h) 'de seçilmiş bir metin düğümü var. Filtre işlevini kullanarak filtreleyebiliriz.

Bu (Ben sadece olsa FF test ettik) çalışması gerekir:

$(function(){ 
    var h = $('#project').html(); 
    $('#project').remove(); 
    $(h).filter("*").hide().appendTo('body'); 

alert("Created HTML, hide, and appended!"); 
});

Oldukça garip davranışları IMO.

kaynak

2010-02-19 12:15:56

Bu talihsiz ama beklenen davranış. Bir HTML dizesinden DOM düğümleri oluşturursanız, düğümler arasındaki boşluklar metin düğümlerine dönüştürülür. Bu genellikle sorunlara neden olur; bu nedenle, özellikle OP'nin amaçları için tekniğin bazen en iyi şekilde kaçınılması gerekir. –

jQuery neden belirli HTML'yi gizleyemiyor?

cevap

İlgili konular