Javascript/Jquery стабильного вложенные родственный

Question

На HTML страницы, которая повторяет вложенную структуру, как

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

несколько раз, с одним «.theButton» также имеющим класс „активный“, я хотел бы использовать JQuery найти кнопку после активной кнопки.

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

будет грубо делать трюк. Однако это все еще находится в разработке, поэтому я не уверен, что уровень вложенности div/div/button, а также родительский элемент с «.ugga» будет стабильным. Поэтому всякий раз, когда есть изменение структуры на стороне HTML, я должен будет изменить указанную выше jquery-magic соответственно.

Что является стабильным, так это то, что будет существовать список элементов «.theButton» на уровне гнездования и все на одном уровне гнездования.

Есть ли простой способ в JQuery найти следующую кнопку после активной, даже если структура была изменена только на div/button или на форму/div/div/button и ".ugga" я полагаюсь на текущий исчезает? Что-то вроде

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

Answer 1

Там в нет короткого и простого решения, о котором я знаю, что позволит вам это сделать.

Самый удобный способ - подготовить HTML-код до настройки javascript для манипуляций с DOM. Даже думая о обновлениях проекта, я бы лично потратил это немного, чтобы изменить небольшую часть js.

Однако, если это нужно для какой-то причины, то я, вероятно, перебрать элементы, чтобы найти тот, что мне нужно, например .:

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

JSFiddle

И еще одно, Oneliner решения :

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

JSFiddle

Answer 2

Это для просмотра всех других элементов, имеющих тот же самый родитель, что и ваш элемент интереса.

$(".theButton active").siblings(".theButton"); 

Это вернет все элементы, имеющие theButton до и после того, как ваши кнопки active элементов, но если вы ищете специально для элемента после active используйте next() с селектором, как этот

$(".theButton active").next(".theButton");