如何將孩子的元素移動到他們各自的祖父母元素

我是jquery的新手，並且正在玩弄它，讓自己熟悉這個着名的框架。我喜歡jquery選擇器的「聲明性」本質，它可以獲取一堆元素併爲它們做些事情，而不需要顯式地循環每個匹配的元素，就像SQL一樣。在探索jQuery時，我給自己提供場景/挑戰，看看我能否解決它們來測試我的理解。這裏有一個問題，我試圖用一行代碼（只使用一個分號）來解決。如何將孩子的元素移動到他們各自的祖父母元素

<div> 
    <div class="parent"> 
     <div></div> 
    </div> 
</div> 

<div> 
    <div class="parent"> 
     <div></div> 
    </div> 
</div> 

<div> 
    <div class="parent"> 
     <div></div> 
    </div> 
</div>

所以我的問題是這樣的。我有三個<div>，一個嵌套在另一個裏面，創造一個「祖父母 - 親子關係」的關係。我有三個這樣的安排（三個祖父母是根本的兄弟姐妹）。所以我的問題是，我如何將所有的孩子都歸入他們自己的祖父母<div>？換句話說，我試圖讓孩子們成爲他們自己父母的兄弟姐妹。下圖是我試圖達到

<div> 
    <div class="parent"> 
    </div> 
    <div></div> 
</div> 

<div> 
    <div class="parent"> 
    </div> 
    <div></div> 
</div> 

<div> 
    <div class="parent"> 
    </div> 
    <div></div> 
</div>

這裏的結果是我試圖無濟於事

$('.parent > div').appendTo($(this).parent());

我甚至試過

$('.parent > div').appendTo($(this).parent().parent());

我想我是什麼在這裏濫用$(this)。我無法找到一種只用一行就可以完成而不使用循環的方法。我想我可以用.each（）循環來做到這一點，但是想嘗試在沒有的情況下實現它。謝謝您閱讀此篇。

來源

2013-03-29 Twisted Whisper

另一個sollution沒有環（不知是不是在jQuery的本身就是一個循環）：

$('.parent').after(function() { 
    return $('div', this); 
});

來源

2013-03-29 22:28:59

這是整潔，雖然還涉及兩個分號。謝謝 –

更好的方式？ $（'。parent'）。after（function（）{return $（'div'，this）}）;' –

我喜歡這個，它更簡潔，沒有明確的循環。 –

你將不得不遍歷它們：

$('.parent > div').each(function() { 
    $(this).parent().after(this); 
});

你也可以這樣寫：

$('.parent > div').each(function() { 
    $(this).insertAfter($(this).parent()); 
});

來源

2013-03-29 22:11:13 Blender

正當我以爲從使用循環的棄權。但我想有時候我們不能擁有兩全其美的世界。爲了滿足我的好奇心，我試圖做什麼'$（'。parent> div'）。appendTo（$（this）.parent（）。parent（））;'do（用簡單的英語）？或者如果你可以向我解釋爲什麼它不起作用，實際上它甚至沒有做任何事情。 –

@TwistedWhisper：沒什麼，真的。 'this'是指'window'，它沒有'.parent（）'，所以'div's沒有什麼可以進入的。 – Blender

這說明了很多。我的印象是'$（this）'指的是'$（'。parent> div'）'。謝謝 –

$('.parent div').each(function(){$(this).clone().appendTo($(this).parent().parent());$(this).remove()})

來源

2013-03-29 22:13:57 Ejaz

好了，每一個答案，迄今已使用each，這是最好的方式做到這一點。但是，在被平原怪異的利益，這裏是避免了顯式循環的另一種方式：

$('.parent > div').unwrap().parent().contents().filter(function(){return this.nodeType===3}).wrap('<div class="parent">');

（它循環在內部很多，而且filter是一個循環，但jQuery的沒有一個內置的方式獲得文本節點）

來源

2013-03-29 22:26:03 Dave

一個有趣的方法來探討jQuery如何工作，儘管是一個非常詳細的=） –

@TwistedWhisper，以及你設置不使用'each'的挑戰！ – Dave

挑戰接受了，看看我的答案，對於另一個溶劑沒有每個;） –

如何將孩子的元素移動到他們各自的祖父母元素

回答

相關問題