Jquery 如何选择元素的父级和父级的同级

我有以下代码：

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

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

在这种情况下，您希望使用：

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

编辑

首先，对于未来的访问者，如果您使用的是jQuery版本1.8-，您可能需要使用它，它是针对兼容性问题的addBack的前身

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

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

结果如下所示：

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

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

这将导致：

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

所以当我们打电话给addBack on son时，我们告诉jQuery将爸爸和儿子推到同一个房间，并将新的类成人和老年人添加到这两个类中

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

新的元素集被推送到对象内部维护的堆栈上。每个连续的过滤方法都会将一个新元素集推送到堆栈上。如果我们需要一个旧的元素集，我们可以使用end将这些元素集从堆栈中弹出

我猜使用。结尾如下：

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

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

你可以找到一个

一些解释： 现在，上面的代码片段发生了什么：

假设此HTML标记：

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

此块从视图中删除同级项，然后将更新标记，如下所示：

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

它在testdiv返回堆栈，然后启动脚本的下一部分

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

测试将从视图中删除，最终标记输出如下：

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

编辑：

---

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

我必须同意关于这个问题的评论；为确保可读性和可维护性，请使用：

---

不幸的是，它已经被弃用了。但是，如果您像我们一样仍停留在jquery的旧版本上，那么这可能是值得的。

可能离题了。。您可以更改问题的视图：

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

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

对不起，我的决定不对

选择器“~”不等于“同级”-方法。“~”选择“test”元素之后的所有同级“p”元素

因此，我建议另一个决定：

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

这是不够优雅，但最快的方式。请检查一下

性能测试结果：

PS

试试这个：

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

---

请注意，prevObject完全没有文档记录；它可以在以后的版本中更改或删除。另一方面，end是有文档记录的，是返回到上一个jQuery对象的首选方法。在某些情况下，这也是一种替代方法：您的决定不正确，它将只删除“test”元素。请检查它。Whouldn't.end比.addBack更合适？@RoToRa在这种情况下它们都做相同的事情我喜欢这个答案-完成任务，而不使用更多的jQuery构造

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

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

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

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