Question

我使用jQuery对表进行排序，大致遵循找到的代码here。代码草图如下：

$('.sort-table').click(function(e) {
    // cache objects
    $table  = $('#sort-table'),        // cache the target table DOM element
    $rows   = $('tbody > tr', $table); // cache rows from target table body

    // sort items
    $rows.sort(<my_predicate_function(a,b){...}>);

    // assign to table - what is going on?
    $rows.each(function(index, row){
        $table.append(row);  // <-- how come $table remains the same size?                  
    });
});

虽然代码工作正常，但我会将行追加到表中，然后简单地遍历已排序的行，并将每个行追加到$table的末尾。

在任何阶段我们都没有从之前的孩子那里发现$table。

由于$table从未被清空过，$table如何保持相同的大小？
append()是否也强制执行目标容器中的单一性？

Answer 1

这就是DOM的工作原理。你不能在两个不同的地方拥有一个元素。如果某个元素已经存在于文档中并且您将其放在其他位置，则它将从当前位置移动。我想，它有点像Set，但这不是它的指定方式。所以它不会删除重复的对象，因为从来没有重复的对象：它只是移动相同的对象，它只能存在于一个地方。

来自the MDN documentation for the underlying method, Node.appendChild：

Node.appendChild()方法将节点添加到指定父节点的子节点列表的末尾。如果给定的子节点是对文档中现有节点的引用，则appendChild()将其从当前位置移动到新位置（在将节点附加到其他节点之前，不需要从其父节点中删除节点）。

如果要复制元素，则需要克隆它们（DOM，jQuery）。

Answer 2

来自.append()的JQuery doc

描述：将参数指定的内容插入到匹配元素集中每个元素的末尾。

来自Set的MDM文档

Set对象允许您存储任何类型的唯一值，无论是原始值还是对象引用。

什么都没有被删除。您只会将现有元素替换为完全相同的元素，例如您的情况。

jquery` append（）`删除重复的对象吗？

2 个答案: