JQuery函数以及它们如何协同工作(after()，$(this).next().html())

Question

我在JQuery中使用一个函数，但我不完全理解它是如何工作的，也许有人可以帮我？

    $("[src*=plus]").live("click", function () {
    $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
    $(this).attr("src", "Imgs/minus.png");
});
$("[src*=minus]").live("click", function () {
    $(this).attr("src", "Imgs/plus.png");
    $(this).closest("tr").next().remove();
});

这意味着什么？我指的是细节^^"

 $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");

Answer 1

让我们把它拆开。

$(this)

指此元素，即单击的元素。

.closest("tr")

从该元素向上遍历DOM树，找到与tr选择器匹配的最近元素（即<tr>元素）

.after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");

然后添加这个HTML。

$(this).next().html()

意味着取this元素，找到next元素，并返回其html。

<小时>

这一切基本上意味着向表中添加另一行，其中有两个单元格，一个为空，另一个为colspan为999，并在其中添加刚刚被点击的元素的HTML。