2014-02-08 113 views
0

獲取一些怪異的行爲有一段代碼,應該做的簡單的DOM操作:insertAfter,然後刪除以前的元素

b.detach(); 
b.insertAfter(a); 
a.remove(); 

最初的HTML看起來像

<a> 
    <b> </b> 
</a> 

(如果它的事項,我使用b.wrap('<a></a>')構建它)

之後代碼運行它應該a後移動b

<a></a> 
<b></b> 

然後取出a

<b></b> 

但事實並非如此。相反a仍然存在,並b就會消失。任何想法可能是錯誤的?

我試着用after()代替,倒車爭論,但得到了同樣的結果。

回答

1

我不知道你的意思,如果我嘗試它,它的工作原理,你想要的方式:

http://jsfiddle.net/8wy7v/

HTML:

<div id="test"> 
    <a> 
     Test <b>Test</b> 
    </a> 
</div> 

<button id="change_dom">manipulate</button> 
<br /> 
<textarea id="result"></textarea> 

JS:

$(document).ready(function(){ 
    $('#change_dom').click(function(){ 
     var a = $('a'), 
      b = $('b'); 

     b.detach(); 
     b.insertAfter(a); 
     a.remove(); 

     $('#result').val($('#test').html()); 
    }); 
}); 

更新:

這是它如何能夠在這個小提琴描述的場景來完成:http://jsfiddle.net/8wy7v/1/

var list = b.parents('ul') 
b.insertAfter(list); 
list.remove(); 
+0

你好這是奇怪的:)我已經更新了你的提琴,以反映我的實際代碼 - http://jsfiddle.net/8wy7v/1/和它有同樣的問題 – thelolcat

+0

這奇怪了。看起來,只要你調用'wrap',變量'a'就不再包含'ul'和'li'元素。我會更新我的答案以及如何解決它,但我不知道爲什麼它不起作用。 –

+0

確定這樣wrap()是問題:/謝謝!我替換insertAfter的組合包()和追加,這工作太 – thelolcat

1

刪除b.detach() b.insertAfter(a)的將其移動

1

的原因是wrap確實克隆的元素 - 所以什麼是a引用從未實際上包含b。順便說一句,該detach是多餘的,因爲元件將當在DOM別處插入被自動刪除。

因此,要獲取要插入的a,您需要重新選擇它(例如通過b.parent())。

+0

感謝的解釋,好知道。我認爲wrap()會成爲'a.insertAfter(b)的快捷方式; a.find('li')。append(b);':) – thelolcat

相關問題