Javascript/Jquery stable nested sibling

Question

On an HTML page which repeats a nested structure like

<div>
  <div class="ugga">
    <button class="theButton">
  </div>
</div>

several times, with one ".theButton" also having class "active", I would like to use jquery to find the button after the active button.

$(".theButton .active").parents(".ugga").parent().next().find(".theButton")

would roughly do the trick. However, this is still under development, so that I am not sure that the nesting level div/div/button as well as the parent element with ".ugga" will be stable. So whenever there is a structure change on the HTML side, I would have to change the above jquery-magic accordingly.

What is stable is that there will be a list of ".theButton" elements at some nesting level and all on the same nesting level.

Is there a simple way in Jquery to find the next button after the active one even if the structure is changed to just div/button or to form/div/div/button and the ".ugga" I rely on currently disappears? Something like

$(".theButton active").nextOnSameLevel(".theButton")

Artur Filipiak Artur Filipiak · Accepted Answer · 2015-02-08T19:52:34

There's no short and simple solution I know of, which would let you to do that.

The most convenient way would be to have the HTML ready before setting up javascript for DOM manipulation. Even thinking of project updates I would personally spent that little while to change a small part of js.

However, if that's needed for some reason, then I would probably loop through the elements, to find the one I need, eg.:

var found = false;
$(".theButton").each(function(){
    if(found){
       // do something with $(this) ...
       return false;
    }
    if($(this).hasClass('active')){
        found = true;
    }
});

JSFiddle

And yet another, oneliner solution:

$(".theButton").eq(($.inArray($(".theButton.active")[0], $(".theButton").toArray()))+1);

JSFiddle

Javascript/Jquery stable nested sibling

2 Answers