如何將兩個元素之間的所有元素和子元素複製到一個臨時元素中？

context = document.createElement("span"); 
start_element = my_start_element; 
end_element = my_end_element; 

// some how iterate through here (assuming start and end are different elements) 
[start_element .. end_element].each(function(current_element){ 
    context.append(current_element); 
});

非常直截了當，只是不知道如何做循環部分的開始和結束節點。 = \如何將兩個元素之間的所有元素和子元素複製到一個臨時元素中？

來源

2011-12-01 NullVoxPopuli

什麼是「之間」？ DOM不是一個扁平列表，而是一個分層模型。 – pimvdb

你想知道如何複製元素嗎？或者如何遍歷元素？或者如何追加/刪除元素？ –

我們可以假設任何關於開始和結束元素之間的關係嗎？他們總是兄弟姐妹嗎？ –

您也可以用普通的DOM和DocumentFragment來完成此操作。

假設開始和結束的節點是兄弟，你有以下的html：

<html> 
<head> 
    <title></title> 
</head> 
<body> 
<div> 
    <p>paragraph 1</p> 
    <p id="start">paragraph 2</p> 
    <p>paragraph 3</p> 
    <ul id="end"> 
     <li>paragraph 4</li> 
    </ul> 
    <p>paragraph 5</p> 
</div> 
</body> 
</html>

下JS會複製節點和在另一個地方插入。

var start = document.getElementById('start'); 
var end = document.getElementById('end'); 

var newcontainer = document.createElement('div'); 
newcontainer.style.backgroundColor = 'red'; 

var clonednodes = document.createDocumentFragment(); 

var node = start, lastnode = null; 
while (lastnode!=end){ 
    // note that cloneNode(true) will lead to duplicate id attributes 
    clonednodes.appendChild(node.cloneNode(true)); 
    lastnode = node; 
    node = lastnode.nextSibling; 
} 

newcontainer.appendChild(clonednodes); 

document.body.appendChild(newcontainer);

來源

2011-12-01 22:53:48

這個解決方案非常乾淨。謝謝！ – NullVoxPopuli

由於@ pimvdb在問題評論中指出：「DOM不是一個扁平列表，而是一個分層模型。」

所以爲了弄清楚你的問題，我必須做出假設。

我會假設你start_element和end_element是兄弟，和你正在努力尋找那也是同級，但兩者之間似乎所有的DOM元素。換句話說，我假設你正在談論DOM的一個特定平面部分。如果我的假設是錯誤的，請忽略這個答案。如果我的假設是正確的，那麼你可以遍歷這樣所有的兄弟姐妹，只有在兩者之間匹配的：

var siblings = $(start_element).parent().children(); 
var currently_between = false; 
var matches = []; 
siblings.each(function() { 
    if (this == start_element) currently_between = true; 
    else if (this == end_element) currently_between = false; 
    else if (currently_between) matches.push(this); 
}); 
// "matches" contains the in-between elements

注意，這個假設start_element和end_element是普通DOM對象，而不是jQuery的擴展對象。如果他們是jQuery擴展，那麼檢查應該像if (this == start_element.get(0))。

還要注意的是有一個jquery siblings方法，但我們用$(start_element).parent().children()，而不是因爲我們想原來start_element成爲組的一部分。 sublings()方法將不會使用。

來源

2011-12-01 22:27:58

這正是我正在尋找的= D謝謝！ – NullVoxPopuli

我認爲，您可以將'siblings（）'與['andSelf（）']（http://api.jquery.com/andSelf/）結合使用，以保留原始'start_element'作爲組的一部分。 –

如何將兩個元素之間的所有元素和子元素複製到一個臨時元素中？

回答

相關問題