javascript - 为什么 jQuery .after() 不链接新元素？

Question

我很好奇为什么 jQuery 的 .after() 不链接或“为您提供”您使用它创建的新元素。在我看来应该是这样，但我不是专家，希望有人能阐明为什么这是一个坏主意。这是一个示例，可以从 .after() 中查看我想要的内容：

这是一些标记：

<div id="content1">
    <p id="hello1">Hello</p>
</div>
<div id="content2">
    <p id="hello2">Hello</p>
</div>

这就是我想要的，但这将“Hello”替换为“World！”：

$('#hello1').after('<p />').text('World!');

这可以完成工作，但它肯定很丑：

$('#hello2').after('<p />');
var $newParagraph = $('#content2 p').last();
$newParagraph.text('World');

这更好，但我并没有完全被卖掉：（也许我应该是？）

$('#hello1').after( $('<p />').text('World') );

请注意，这显然是一个简化的示例，即“<p>World!</p>”不是我要添加的，我的现实世界问题比这更复杂。

感谢您的任何想法。

score 22 · Accepted Answer

据推测.after()，它允许您链接更多适用于最初选择的元素的方法：

$('#hello1').after( $('<p />').text('World') )
            .before( $('<p />').text('Before text') )
            .remove();

这使行为与其他方法保持一致，因此您不必尝试记住哪些返回原始对象，哪些返回其他对象。

请注意，在您的情况下，$('#hello1')由于您是按 id 选择的，因此只选择了一个元素，但是您可以将其应用于.after()包含许多元素的 jQuery 对象，以便在多个元素之后添加（克隆）内容：

$('div.someclass').after( $('<p/>').text('whatever') );

在这种情况下，我认为将链接上下文保持为原始 jQuery 对象绝对是有意义的。

该.insertAfter()方法可能更接近您想要的：

$('<p/>').insertAfter('#hello1').text('World');

（它还返回它应用到的 jQuery 对象，但它以“反向”方式插入。）

您可以编写自己的插件方法来返回要添加的元素，但这会令人困惑，因为它会与所有标准方法相反。

score 3 · Accepted Answer

大多数 jQuery 方法就是这样。jQuery最好保持一致并返回原始对象。

修复是这样的：

$('#hello1').after(
    $('<p/>', { text: 'World!' })
);

或者：

$('#hello1').after(
    $('<p/>').text('World!')
);

甚至：

$('<p/>').text('World!').insertAfter('#hello1');

后者实际上可能是首选，因为它会继续从新<p>元素链接。

score 0 · Accepted Answer

它不会为您提供创建的元素，因为您并不总是创建一个元素，JQuery 需要大量的处理能力来检测一个元素已创建，并且总是让它返回更有意义元素女巫是这次行动的目标。

3 回答 3