CODEWITHSUNDEEP
jqueryjquery-selectorssiblings
Gary
Gary

Reputation: 13922

Select an element and its siblings

Toggling an element and its siblings can be accomplished as:

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

Combining them doesn't work:

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

How can both be selected at the same time?

Upvotes: 19

Views: 13343

Answers (4)

Ivan Drinchev
Ivan Drinchev

Reputation: 19591

For jQuery 1.8+, use .addBack():

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

For earlier jQuery versions, use the deprecated .andSelf() call (see demo):

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

Upvotes: 36

mtkopone
mtkopone

Reputation: 6443

Also works:

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

Upvotes: 1

jurijcz
jurijcz

Reputation: 366

for prev siblings and self:

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

for all siblings and self:

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

Upvotes: 11

David Thomas
David Thomas

Reputation: 253506

Incidentally, while this question has already been answered by drinchev, I thought I'd paste this quick experiment I just did, after reading the question, which also works. Albeit...it surprised me when it did:

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

JS Fiddle demo.

Incidentally, a JS Perf loose comparison of the two selector approaches.

Edited to add an IE-(so far as I know)-friendly update, albeit I'm currently saddling all browsers with it, rather than feature-detecting (also, I finally realised that blue != green):

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

Upvotes: 7

Related Questions