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?

score 35 · Answer 1 · edited Dec 29 '14 at 06:11

35

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

edited Dec 29 '14 at 06:11

Dave Jarvis

30,436
41
178
315

answered Apr 22 '12 at 16:04

drinchev

19,201
4
67
93

The *demo* is wrong. The answer is using `prev()` while the demo is using `parent()`, which is not what the OP wanted. – Pang Dec 12 '16 at 04:16

score 11 · Answer 2 · answered Apr 22 '12 at 16:48

11

for prev siblings and self:

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

for all siblings and self:

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

answered Apr 22 '12 at 16:48

jurijcz

366
1
12

score 7 · Accepted Answer · edited May 23 '17 at 12:24

7

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

edited May 23 '17 at 12:24

Community

1
1

answered Apr 22 '12 at 16:11

David Thomas

249,100
51
377
410

The joys of the web! No, seriously..! =) To cut a long story short [IE<9 doesn't 'do' `previousElementSibling`](http://www.quirksmode.org/dom/w3c_core.html#t84). Still, there's the old, and always fashionable, `if` approach. =) – David Thomas Apr 22 '12 at 16:25
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! – Gary Apr 22 '12 at 16:26
2

There is an easier way $(this).prev().andSelf().toggle(); – Apr 11 '13 at 21:32

score 1 · Answer 4 · answered Sep 23 '14 at 08:59

1

Also works:

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

answered Sep 23 '14 at 08:59

mtkopone

5,955
2
27
30

Select an element and its siblings

4 Answers4