How do I select a sibling element using jQuery?

JquerySelector

Jquery Problem Overview


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

Jquery Solutions


Solution 1 - Jquery

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

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

Solution 2 - Jquery

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

Solution 3 - Jquery

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

Solution 4 - Jquery

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

Solution 5 - Jquery

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

you can also find an element using Jquery selector

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

Solution 6 - Jquery

you can select a sibling element using jQuery

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

Demo here

Solution 7 - Jquery

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.

Solution 8 - Jquery

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

Solution 9 - Jquery

Try -

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

Solution 10 - Jquery

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

Solution 11 - Jquery

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionOnly Bolivian HereView Question on Stackoverflow
Solution 1 - JqueryMadara's GhostView Answer on Stackoverflow
Solution 2 - JqueryJohnDView Answer on Stackoverflow
Solution 3 - JquerySourav BasakView Answer on Stackoverflow
Solution 4 - JquerySarasjdView Answer on Stackoverflow
Solution 5 - JqueryBharath KumaarView Answer on Stackoverflow
Solution 6 - JqueryDeveloperView Answer on Stackoverflow
Solution 7 - JqueryPeter MeadleyView Answer on Stackoverflow
Solution 8 - JqueryAlienWebguyView Answer on Stackoverflow
Solution 9 - Jqueryipr101View Answer on Stackoverflow
Solution 10 - JqueryShobiView Answer on Stackoverflow
Solution 11 - JqueryTarik A.View Answer on Stackoverflow