Question

我有一个jQuery Accordion，其中每个面板都由一个<div>元素和.ui-accordion-content类表示。每个面板都有一个表单。在每个表单的提交事件中，我想打开下一个面板。

我想从表单中找到DOM树，找到第一个div的类.ui-accordion-content，并在页面上返回它的索引，所以我知道哪个表单是＆＃34 ;提交＆＃34;以及下一个打开的面板。

这是我写的函数：

$("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;
    });
});

它没有返回正确的索引。出了什么问题？

编辑：这是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元素的选择。因此，传递jQuery的.index()方法的选择器参数，并添加1以获取下一个：

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

Answer 2

您可以使用父母并找到第一个.ui-accordion-content。

$("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()

找到第一个父类的索引

3 个答案: