选择一个元素及其兄弟

时间:2012-04-22 15:56:25

标签: jquery jquery-selectors siblings

切换元素及其兄弟元素可以完成:

$(this).toggle();
$(this).prev().toggle();

将它们组合起来不起作用:

$(this,$(this).prev()).toggle();

如何同时选择两者?

4 个答案:

答案 0 :(得分:32)

对于jQuery 1.8+,请使用.addBack()

$(this).prev().addBack().toggle();

对于早期的jQuery版本,请使用已弃用的.andSelf()调用(请参阅demo):

$(this).prev().andSelf().toggle();

答案 1 :(得分:8)

对于兄弟姐妹和自我:

$(this).prev().andSelf().toggle();

所有兄弟姐妹和自己:

$(this).parent().children().toggle();

答案 2 :(得分:6)

顺便提一下,虽然这个问题已经answered by drinchev,但我认为在阅读完问题之后我会粘贴这个快速实验。虽然......当它发生时让我感到惊讶:

$('#recipient').click(
    function(){
        var pair = [this, this.previousElementSibling];
        $(pair).toggleClass('red green');
    });​

JS Fiddle demo

顺便提一句,JS Perf loose comparison of the two selector approaches


编辑添加一个IE-(据我所知)友好的更新,虽然我目前正在使用它所有浏览器,而不是功能检测(同样,我终于意识到蓝色!=绿色):

function pESibling(n){
    var nPS = n.previousSibling;
    if (!n || nPS === null){
        return false;
    }
    else if (nPS.nodeType == 1){
        return nPS;
    }
    else {
        return pESibling(nPS);
    }
}

var that = document.getElementById('recipient'),
    pair = [that, pESibling(that)];
$(pair).toggleClass('red green');
console.log(pair);
​

JS Fiddle demo

答案 3 :(得分:1)

也有效:

$(this).prev().add($(this)).toggle()