如何选择一个元素的父和母的兄弟姐妹(How to select an element's p

我有这样的代码：

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

我怎样才能连锁这个代码，而不是单独写呢？

Answer 1:

你想用回加（）在这种情况下：

$("#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 ，并添加类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的son ，我们告诉jQuery来推动dad和son到同一个房间，并添加新的类adult和oldster他们两个。

Answer 2:

所述end()方法利用jQuery的链接性能主要时非常有用。当不使用链接，我们通常只需要调用以前的object由变量名，所以我们并不需要操纵堆栈。

新的一组的元素的被压入被保持内部的栈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>

如果我们用IT连锁.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

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

选择“〜”不等于“ 兄弟 ” -方法。 “〜”将选择遵循“#TEST‘元素毕竟同级’P” -elements。

所以我建议另一项决定：

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

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

Answer 6:

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

编辑：尽管这个作品，不这样做。马特的评论说， prevObject是无证

Answer 7:

试试这个：

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

文章来源: How to select an element's parent and the parent's siblings