jQuerys包裝函數包裝很奇怪

不知何故，當我試圖包裝兩個div標籤之間有一些文字，而不是兩個div之間沒有文字時，它的行爲會有所不同。

的jQuery：

var wrapper1 = '<div class="wrap1">something in between<div class="innerwrap1">'; 
$('.content1').wrap(wrapper1);  
var wrapper2 = '<div class="wrap2"><div class="innerwrap2">'; 
$('.content2').wrap(wrapper2);

生成的HTML是這樣的：

<div class="wrap1"> 
    something in between 
    <div class="innerwrap1"></div> <!-- wtf? --> 
    <div class="content1">Lorem</div> 
</div> 
<div class="wrap2"> 
    <div class="innerwrap2"> 
     <div class="content2">Ipsum</div> 
    </div> 
</div>

這裏有一個小提琴： http://jsfiddle.net/RfJN5/

的第一個結果是相當驚人的，不是嗎？我認爲這兩個關閉div應該放在.content1之後，不管divs之間是否有任何文本。

當然我知道自己添加關閉div來控制行爲更安全，但是這是一種錯誤還是隻是對如何使用jQuery wrap的錯誤理解？

在此先感謝！

來源

2013-08-06 voodoocode

你在你的HTML生成的代碼中使用無效的標記。預期意外的結果。 **不同的瀏覽器會以不同的方式解釋無效標記。** –

與許多其他人一樣，您完全誤解了這些功能的工作原理。我已經在'.append（）'[here]（http://stackoverflow.com/questions/15810067/sequence-of-running-code-in-jquery）的合理細節中介紹了它，很多相同的想法堅持'.wrap（）'。 –

@AnonyGris你可以幫助我理解這些函數解析給定的字符串以創建DOM元素。 – voodoocode

按預期工作，您的wrapper1將是將圍繞content1纏繞的主要對象，並且因爲您尚未關閉innerwrapper1，jquery會爲您關閉它。如果你想與內包裝材料來包裝，然後使這是一個對象，包裝內容，然後在內部包裝物附加到包裝：

var wrapper1 = $('<div class="wrap1">something in between</div>'), 
    innerWrapper = $('<div class="innerwrap1" />'); 

$('.content1').wrap(innerWrapper);  
wrapper1.append($('.innerwrap1'));

Example

來源

2013-08-06 15:05:03 Pete

jQuerys包裝函數包裝很奇怪

回答

相關問題