javascript - jQuery 附加问题而不删除原始元素

Question

我刚刚写了一些代码来练习我的 jQuery。当我编写这段代码时，我发现它只使用 append() 并且不删除 table 中的任何原始 tr 元素就可以正常工作。它是如何工作的——有人可以向我解释一下吗？ here is the complete code .谢谢!

这是我的 jQuery 代码:

$(document).ready(function () {    
     var list = a();
     var last = $('#table').find("tr").length;     
    $('#table').find("tr").each(function (index, element) {
            $(this).prepend($("<button/>").text("↑").bind('click', function () {
                up($(this).parent(), last);
            }));
            $(this).prepend($("<button/>").text("↓").bind('click', function () {
                down($(this).parent(), last);
            }));
        });
        $('#table').before($('<button />').text("reset").on('click', function () {
            reset(list);
        }));
      });
function up(tr, last) {
    if (0 != tr.index()) {
        var prevTr = tr.prev();
        tr.after(prevTr);
    }
}
function down(tr, last) {
    if (last - 1 != tr.index()) {
        var nextTr = tr.next();
        tr.before(nextTr);
    }
}
var reset = function (list) {
    for (var i = 0; i < list.length; i++) {
        $("#table").append(list[i]);
    }
};
var a = function () {
    var list = [];
    $('#table tr').each(function () {
        list.push($(this));
    });
    return list;
};

Answer 1

请注意，附加已经存在的元素只是移动它。我想也许您想克隆它:

jsFiddle

var reset = function (list) {
    for (var i = 0; i < list.length; i++) {
        $("#table").append(list[i].clone(true));
    }
};

但是，reset 函数的名字是错误的...