jQuery 的 append() 方法和链式调用顺序调试

Question

我正在尝试使用Jquery向表格中插入新行。有人可以对以下两种技术进行评论吗：

1. This works correctly:

   $('<tr>').append(row).appendTo(table);
   

2. This does not work, but it is not clear why?

   $(row).appendTo($('<tr>')).appendTo(table);
   

- cmcginty

Answer 1

$(row).appendTo($('<tr>').appendTo(table)); 

尝试一下。看起来你只是把括号放错了位置。

- snowBlind

---

我不确定。我对JS和Jquery还很陌生。但是，你应该查看下面的John的帖子。 - snowBlind

Answer 2

$(row).appendTo($('<tr>'))

这将在新创建的<tr>中添加一行。它返回一个jQuery引用，指向row - 而不是指向新创建的<tr>。

                          .appendTo(table);

将row添加到table中，从而将其从新创建的<tr>中删除。

请尝试这个方法。它会正确获取引用。

$('<tr>').append(row).appendTo(table);

- Jeff

---

你的最后一个代码块是问题中的#1，但在我看来并不是很优雅。 - cmcginty

就像我之前所说的一样：您正在附加一个动态tr行，然后立即将其（行）附加到表中。 :) - John Green

@Casey 是的，我在写那部分之后没有回头看你的问题。 - Jeff

@John 不是这样的。我正在将 row 添加到动态行中，然后将 tr 添加到表格中。append 不会改变链式结构。它会返回 tr。 - Jeff

@Jeff - 你知道的... 你完全是对的。对此我很抱歉。：） - John Green

Answer 3

在你的第二个例子中...

$(row).appendTo($('<tr>')).appendTo(table);

当您第二次调用appendTo()时，设置的内容并非您所想。它将是row。

这个jsFiddle应该会更清楚。

- alex

Answer 4

您的作用域不正确。appendTo不会更改链的作用域。您正在附加动态tr行，然后立即将其附加到表格中。

---

Snowblind的解决方案是可行的，这个也可以：$(table).append($(row).wrap('<tr></tr>'));

可能还有很多其他的变体。只要确保你从中获得了一些连锁理解就好了。: )

- John Green

---

我无法解决包装示例。我尝试了：table.append($('<td>1</td>').wrap('<tr></tr>')); - cmcginty