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

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并添加类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>

如果我们链接它 .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,那么它可能是值得的.