Question

我有这段代码：

$("#test").siblings('p').remove();
$("#test").remove();

如何链接此代码而不是单独编写？

Answer 1

您希望在这种情况下使用addBack()：

$("#test").siblings('p').addBack().remove();

修改

首先，对于未来的访问者，如果您使用的是jQuery版本1.8，那么您可能需要使用andSelf()作为兼容性问题的addBack()的前身。

其次，在这种情况下，end和addBack都会执行相同的任务，但它们实际上是不同的视角。看看这个HTML：

<div class="grandpa"> <div class="dad"> <div class="son"> Test </div> </div> </div>

如果我们使用end()：

$('.grandpa') .find('.dad') .find('.son') .addClass('youngster') .end() .addClass('adult') .end() .addClass('oldster');

结果如下：

<div class="grandpa oldster"> <div class="dad adult"> <div class="son youngster"> Test </div> </div> </div>

因此，当我们对end()使用son时，我们告诉jQuery它需要从son返回到父集dad并添加类{ {1}}。

但是当我们使用adult时：

addBack

将导致此：

$('.grandpa') .find('.dad') .find('.son') .addClass('youngster') .addBack() .addClass('adult') .addBack() // This simply do nothing since `addBack` is not traverse up DOM element .addClass('oldster');

因此，当我们在<div class="grandpa"> <div class="dad adult oldster"> <div class="son youngster adult oldster"> Test </div> </div> </div>上致电addBack时，我们告诉jQuery将son和dad推送到同一个会议室并添加新课程son和adult他们两个。

Answer 2

end()方法主要在利用jQuery的链接属性时很有用。当不使用链接时，我们通常可以通过变量名称调用先前的object，因此我们不需要操纵堆栈。

将新的元素集推送到object内维护的堆栈中。每个连续的过滤方法将新元素集推送到堆栈上。如果我们需要一个较旧的元素集，我们可以使用end()从堆栈中弹出集合。

我想这样使用.end()：

$("#test").siblings('p').remove().end().remove();

您可以找到fiddle

一些解释：

现在上面的代码片段发生了什么：

假设这个HTML标记：

<div id='container'>
   <div id='test'>This is supposed to be removed.</div>
   <p>And this to be removed too.</p>
</div>

脚本执行时

：

$("#test").siblings('p').remove()

此块从视图中删除兄弟项<p>，然后标记将更新如下：

<div id='container'>
   <div id='test'>This is supposed to be removed.</div>
</div>

如果我们将其链接到.end()

$("#test").siblings('p').remove().end()

它返回到#test div处的堆栈，然后脚本的下一部分被触发

$("#test").siblings('p').remove().end().remove();
                             //--^^^^^^^^^^^^^^^----this next part

和#test将从视图中删除，您的最终标记输出将如下：

<div id='container'>
</div>

Answer 3

可能偏离主题..您可以更改问题的视图：

$("#test, #test ~ p").remove(); // !! incorrect way, see comment below

伙计们抱歉:(我的决定不正确!!

选择器'〜'不等于'兄弟' - 方法。 '〜'选择所有兄弟' p ' - AFTER 后面的元素 #test 元素。< / p>

所以我建议另一个决定：

$("#test, > p", $('#test').parent()).remove();

它不够优雅，但却是最快捷的方式。请检查“http://jsperf.com/how-to-chain-this-code-stackoverflow-16009101”

性能测试结果：

Performance test result

PS http://jsfiddle.net/Dpe59/

Answer 4

我必须同意对这个问题的评论;为了便于阅读和维护，请使用andSelf：

$("#test").siblings('p').andSelf().remove();

不幸的是，它已被弃用。但是如果你像我们一样坚持使用旧版本的jquery，那么可能值得。

Answer 5

$("#text").siblings('p').remove().prevObject.remove();

修改虽然这有效，但不要这样做。正如马特的评论所说，prevObject没有记载

Answer 6

$("#test").siblings("p").siblings("#test").remove();

Answer 7

试试这个：

$("#test").siblings('p').addBack().remove();

如何选择元素的父元素和父元素的兄弟元素

7 个答案:

一些解释：