Javascript 如何找到给定元素所在的jquery accordion面板的索引

我正在使用jqueryaccordion作为多部分注册表单，在提交表单之前，我需要确保填写了所有必填字段。因此，如果我发现一个必填字段没有填写，我需要打开它所在的手风琴面板，以便我可以为用户将焦点放在该字段上

我已经得到了违规元素的id，所以我可以像这样获得字段的句柄

$('#' + columnname)

但我不知道如何确定该字段在哪个面板中。 我试过这个：

var accordionindex = $('#' + columnname).closest('.ui-accordion-content').index();

但这似乎不起作用，因为第一个面板返回1，第二个面板返回3。如果我减去1，第一个面板的结果是0（正确），第二个面板的结果是2（仍然不正确）

我还尝试：

var accordionindex = $('#' + columnname).closest("H4").index()

但对于所有面板，这将返回-1

我的手风琴是这样开始的：

$('#registration').accordion({
     collapsible: false,
     header: 'h4',
     heightStyle: 'content',
     active: 0
})

当然有一个简单的方法可以做到这一点。

您可以使用存储手风琴中每个面板的索引，然后在尝试激活输入面板时获取索引，请查看下面的示例

HTML:

<div id="accordion">
  <h3><a href="#">Section 1</a></h3>
  <div data-index='0'>
    <p>Section 1 Content</p>
  </div>

  <h3><a href="#">Section 2</a></h3>
  <div data-index='1'>
    <p>Section 2 Content</p>
  </div>

  <h3><a href="#">Section 3</a></h3>
  <div data-index='2'>
    <p>
       Section 3 Content
      <input id="test" type='text'>
    </p>
  </div>

  <h3><a href="#">Section 4</a></h3>
  <div data-index='3'>
    <p>Section 4 Content</p>
  </div>
</div>

$(function() {
      $("#accordion").accordion({ autoHeight: true, collapsible: true});

      //Get panel index of input `#test` 
      var index = $('#test').closest('.ui-accordion-content').data('index');

      //Active panel of input `#test` 
      $( "#accordion" ).accordion( "option", "active", index );
});

---

希望这有帮助。

也可以从手风琴的数据中提取面板索引：

// id is like 'ui-accordion-accordion-panel-2'
var elems = $('#' + columnname).closest('.ui-accordion-content').attr('id').split('-');
var accordionindex = parseInt(elems[elems.length - 1], 10);

---

（查看script.js中的代码）。

如果不查看HTML，很难说。没有参数，它给出了所有同级的索引。也许你还有其他因素。可能会将选择器传递给索引，这样它只会给出特定元素的索引。是的，您需要发布标记；）我喜欢这个答案，因为如果我再添加一个面板，我就不必担心添加数据属性了。它会起作用的。@Vincent关于parseInt你是对的，我在plunker中有它，现在也更新了答案。谢谢！看起来是个不错的解决方案，但如果可能的话，我更喜欢不依赖标记的解决方案。