如何将两个元素之间的所有元素和子元素复制到一个临时元素中？

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'作为组的一部分。 –

如何将两个元素之间的所有元素和子元素复制到一个临时元素中？

回答

相关问题