Найти указатель первого родителя с классом

Question

У меня есть аккордеон jQuery, где каждая панель представлена ​​элементом <div> с классом .ui-accordion-content. Каждая панель имеет форму внутри. В случае отправки каждой формы я хотел бы открыть следующую панель.

Я хотел бы путешествовать по дереву DOM из формы, найти первый div с классом .ui-accordion-content и возвращает его индекс на странице, так что я знаю, какая форма была «представлен» и который панели, чтобы открыть следующий ,

вот функция, которую я написал:

$("form").each(function() { 
    $(this).submit(function (e) { 
     e.preventDefault(); // this will prevent from submitting the form. 
     $("#accordion").accordion({ active: $(this).closest(".ui-accordion-content").index() }); 
     return false; 
    }); 
}); 

Он не возвращает правильные индексы. Что случилось?

EDIT: Вот HTML:

<div id="Accordion"> 

    <h3 class="ui-accordion-header"></h3> 
    <div class="ui-accordion-content FormOne"> 
     <form> 
     </form> 
    </div> 

    <h3 class="ui-accordion-header"></h3> 
    <div class="ui-accordion-content FormTwo"> 
     <form> 
     </form> 
    </div> 

</div> 

Answer 1

Вам нужно отфильтровать выбор в отношении только .ui-accordion-content элементов. Так передать селектор пары из .index() метода JQuery и добавьте 1, чтобы получить следующий:

active: $(this).closest(".ui-accordion-content").index(".ui-accordion-content") + 1

Answer 2

Вы можете использовать родитель и найти первый .ui-гармошку-контент.

$("form").each(function() { 
    var self = $(this); 
    self.submit(function (e) { 
    var _index = self.parents('.ui-accordion-content:first').index(); 
    e.preventDefault(); // this will prevent from submitting the form. 
    $("#accordion").accordion({ active: _index }); 
    return false; 
    }); 
}); 

Answer 3

Вы можете использовать селектор .parents() пройти вверх по дереву и найти соответствующий родителю.

$(this).parents(".ui-accordion-content").index()