How do I select a sibling element using jQuery?

Question

Can you help me with this jQuery selector?

$(".auctiondiv .auctiondivleftcontainer .countdown").each(function () {
    var newValue = parseInt($(this).text(), 10) - 1;
    $(this).text(newValue);

    if (newValue == 0) {
        $(this).parent().fadeOut();
        chat.verify($(this).parent().parent().attr('id'));
    }
});

Basically, I want to select the element with .bidbutton class that belongs in the same parent as the .countdown in the each loop:

<div class="auctiondivleftcontainer">
    <p class="countdown">0</p>
    <button class="btn primary bidbutton">Lance</button>                            
</div>

And then apply this to that button:

$(button here).addClass("disabled");
$(button here).attr("disabled", "");

score 166 · Accepted Answer · answered Sep 18 '11 at 17:52

166

Use jQuery .siblings() to select the matching sibling.

$(this).siblings('.bidbutton');

answered Sep 18 '11 at 17:52

Madara's Ghost

172,118
50
264
308

4

`Siblings()` returns an array of *all* of the elements that match said selector. – Luke May 20 '15 at 18:13
3

How to get all siblings but not this ? – melvin Mar 22 '18 at 05:44

score 7 · Answer 2 · answered Sep 18 '11 at 17:52

7

$(this).siblings(".bidbutton")

answered Sep 18 '11 at 17:52

JohnD

3,884
1
28
40

score 6 · Answer 3 · edited Jul 13 '20 at 01:46

6

$("h2").siblings().css({"color": "blue"});

edited Jul 13 '20 at 01:46

Samuel Liew

76,741
107
159
260

answered Sep 15 '15 at 06:07

Sourav Basak

486
1
4
15

score 4 · Answer 4 · edited May 31 '21 at 20:39

4

$("selector").nextAll(); 
$("selector").prev();

you can also find an element using Jquery selector

$("h2").siblings('table').find('tr');

edited May 31 '21 at 20:39

Jean-François Fabre

137,073
23
153
219

answered May 04 '15 at 13:01

Barath Kumar

439
3
7

score 4 · Answer 5 · answered Mar 06 '21 at 10:40

4

you can use 
$(this).siblings(".bidbutton").addClass("disabled");
$(this).siblings(".bidbutton").attr("disabled","");

answered Mar 06 '21 at 10:40

Sarasjd

199
2
11

score 1 · Answer 6 · answered Dec 05 '16 at 12:19

1

If you want to select a specific sibling:

var $sibling = $(this).siblings('.bidbutton')[index];

where 'index' is the index of the specific sibling within the parent container.

answered Dec 05 '16 at 12:19

Peter Meadley

509
2
16

Only useful if you know the index ahead of time. – TylerH Oct 22 '20 at 16:05

score 0 · Answer 7 · answered Apr 12 '19 at 13:53

0

also if you need to select a sibling with a name rather than the class, you could use the following

var $sibling = $(this).siblings('input[name=bidbutton]');

answered Apr 12 '19 at 13:53

Shobi

10,374
6
46
82

score 0 · Answer 8 · answered Mar 10 '21 at 15:06

If I understood that correctly you're already in a loop (each) so you would always want to select that one sibling button inside each loop runthrough? Since siblings() returns an array, this would be the way to go:

$(this).siblings('.bidbutton')[0]

You can apply both things you wanted in a single line doing this:

$(this).siblings('.bidbutton')[0].addClass("disabled").attr("disabled", "");

score 0 · Answer 9 · answered Sep 18 '11 at 17:52

0

Since $(this) refers to .countdown you can use $(this).next() or $(this).next('button') more specifically.

answered Sep 18 '11 at 17:52

AlienWebguy

76,997
17
122
145

1

And what if it isn't right next to him? what if it's behind him? Use the more general siblings solution. – Madara's Ghost Sep 18 '11 at 17:53
2

Amazingly, it IS in his provided DOM and there's no reason to traverse ALL the siblings if he doesn't have to. – AlienWebguy Sep 18 '11 at 17:55

score 0 · Answer 10 · answered Sep 18 '11 at 17:53

0

Try -

   $(this).siblings(".bidbutton").addClass("disabled").attr("disabled", "");

answered Sep 18 '11 at 17:53

ipr101

24,096
8
59
61

How do I select a sibling element using jQuery?

10 Answers10

Linked

Related