Question

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);
});

非常简单，只是不知道如何使用开始和结束节点进行循环部分。 = \

Answer 1

正如@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成为该组的一部分。 <{1}}方法会将其删除。

Answer 2

您也可以使用普通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);

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

2 个答案: