jquery - 如何选择元素的父级和父级的兄弟姐妹

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()for时son，我们告诉 jQuery 它需要从son父集返回dad并添加 class 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>

所以当我们调用addBackon时son，我们是在告诉 jQuery 将dadand推son入同一个房间并添加新的类adultandoldster给它们。

Answer 2

该end()方法主要在利用 jQuery 的链接属性时很有用。当不使用链接时，我们通常可以object通过变量名调用一个previous，所以我们不需要操作堆栈。

新的元素集被推入一个堆栈，该堆栈在object. 每个连续的过滤方法都会将一个新元素集推入堆栈。如果我们需要一个较旧的元素集，我们可以使用end()将这些集从堆栈中弹出。

我想使用.end()这样的：

$("#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>

当脚本执行时：

$("#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()

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

$("#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

伙计们对不起:(我的决定不正确！！

选择器“ ~ ”不等于“兄弟”方法。' ~ ' 选择在 ' #test ' 元素之后的所有同级 ' p ' 元素。

所以我建议另一个决定：

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

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

性能测试结果：

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();