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", "");

Answer 1

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

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

Answer 2

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

Answer 3

Here is a link which is useful to learn about select a siblings element in Jquery.

How do I select a sibling element using jQuery

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

you can also find an element using Jquery selector

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

For more information, refer this link next(), nextAll(), prev(), prevAll(), find() and siblings in JQuery

Answer 4

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

Details are described in the source below:

http://www.namasteui.com/traversing-siblings/

Answer 5

jQuery provides a method called "siblings()" which helps us to return all sibling elements of the selected element. For example, if you want to apply CSS to the sibling selectors, you can use this method. Below is an example which illustrates this. You can try this example and play with it to learn how it works.

$("p").siblings("h4").css({"color": "red", "border": "2px solid red"});

Answer 6

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

Answer 7

Try -

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

Answer 8

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.

Answer 9

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]');

Answer 10

you can select a sibling element using jQuery

 <script type="text/javascript">
    $(document).ready(function(){
        $("selector").siblings().addClass("classname");
    });
 </script>

Demo here