Select an element and its siblings

Question

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?

Contracture

Answer 1

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

Membrane

The joys of the web! No, seriously..! =) To cut a long story short IE<9 doesn't 'do' previousElementSibling. Still, there's the old, and always fashionable, if approach. =) – Membrane

I was making a stupid mistake when testing your solution. While, no, previousElementSibling won't do the trick, simply using an array will... $([$(this),$(this.prev())]) does it! – Contracture

There is an easier way $(this).prev().andSelf().toggle(); – Fuscous

Answer 2

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

Estoppel

The demo is wrong. The answer is using prev() while the demo is using parent(), which is not what the OP wanted. – Angell

Answer 3

for prev siblings and self:

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

for all siblings and self:

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

Jeannettejeannie

Answer 4

Also works:

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

Peba