Question

我刚刚写了一些代码来练习我的jQuery。当我编写此代码时，我发现只使用append（）并且不删除tr中的任何原始table元素，它可以正常工作。它是如何工作的 - 有人可以向我解释一下吗？ 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));
    }
};

但是，重置功能被错误命名......

Answer 2

$(document).ready(function () {

等待页面和所有要加载的元素

     var list = a();
     var last = $('#table').find("tr").length;

设置特定变量，在这种情况下，list是页面后面定义的函数a()，最后得到表中最后一个tr的长度。

    $('#table').find("tr").each(function (index, element) {

通过id #table

表中的每个tr元素设置一个循环

            $(this).prepend($("<button/>").text("↑").bind('click', function () {
                up($(this).parent(), last);
            }));

因为你在循环中，$(this)代表循环当前所在的tr。然后它会添加一个按钮，并在此按钮上添加一个单击侦听器。当按下该按钮时，它将调用该函数，该函数将在稍后定义，其中父按钮为第一个参数，最后一个（前面已定义）为第二个

            $(this).prepend($("<button/>").text("↓").bind('click', function () {
                down($(this).parent(), last);
            }));

这会添加另一个按钮，但调用down（）而不是up（）

});

循环结束。

        $('#table').before($('<button />').text("reset").on('click', function () {
            reset(list);
        }));

这会在表之前添加一个按钮，当单击该按钮时，将list作为唯一参数调用reset函数，list将设置为a（）。

      });
function up(tr, last) {
    if (0 != tr.index()) {
        var prevTr = tr.prev();
        tr.after(prevTr);
    }
}

当向上移动项目时调用此函数，它首先检查索引是否不为0（所以不是第一个元素，因为它不能向上移动）如果不是那么它将之前的tr放入变量tr。在这种情况下，该按钮的父节点（或当前tr）

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

此函数保存在变量reset中，它循环遍历每个tr（在（）中定义）并将其追加到表中，

var a = function () {
    var list = [];
    $('#table tr').each(function () {
        list.push($(this));
    });
    return list;
};

此函数创建并返回一个循环遍历每个tr并添加到该数组的数组。所以我们知道原始状态并且可以返回它。

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

2 个答案: