jquery 手风琴 header 索引

Question

jquery 手风琴

我想获取 "xaccordion" 中 h3 的索引。手风琴中只有一个 link 将具有 class "active" （也可以是一个 id，但我将其设为 class）

如何获取索引。现在元素没有找到，索引返回 -1;

HTML:

<div id="xaccordion">
  <h3>title</h3>
  <div>
    <p>
      <a href="#">link</a>
      <a class="active" href="#">link</a>
    </p>
  </div>
  <h3>title</h3>
  <div>
    <p>
      <a href="#">link</a>
      <a href="#">link</a>
    </p>
  </div>
</div>

JS:

var active_header = $("#xaccordion a.active").closest("h3");
var active_header_index = $("#xaccordion").index(active_header);

console.log("index: " + active_header_index);

Answer 1

我稍微改变了你的HTML，所以一切都关闭了：

<div id="xaccordion">
    <h3> test </h3>
    <div>
        <p>
          <a href="#">link</a>
          <a href="#">link</a>
        </p>
    </div>

    <h3> test2 </h3>
    <div>
        <p>
            <a href="#">link</a>
            <a href="#">link</a>
        </p>
    </div>

    <h3> test3 </h3>
    <div>
        <p>
            <a href="#">link</a>
            <a class="active" href="#">link</a>
        </p>
    </div>
</div>

在这种情况下，您实际上不需要 .closest()。您构造 HTML 的方式可以上升两个 .parent() 这将带您到包含链接的 div。您需要从那里寻找 #xaccordion div。这将找到 div 的索引。从那里您可以找到同级 H3，但不需要它，因为这些索引将相同。

这是 JS：

var active_header = $("#xaccordion a.active").parent().parent();
var active_header_index = $("#xaccordion div").index(active_header);

console.log(active_header);
console.log("index: " + active_header_index);

尝试移动 class="active"。这应该会给出您想要的结果。

编辑：这是 fiddle https://jsfiddle.net/rc8ack29/

Answer 2

试试这个代码..希望它有用...做了一些改变，比如关闭标签等。

    <html>
    <head>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script>
          $(document).ready(function(){
          var active_header = $("a.active").parents("h3").index();
        //var active_header_index = $("#xaccordion").index(active_header);

          console.log(active_header);
      });
      </script>
    </head>
    <body>
<div id="xaccordion">
  <h3>
  <div>
    <p>
      <a href="#">link</a>
      <a class="active" href="#">link</a>
    </p>
  </div>
  </h3>
  <div>
    <p>
      <a href="#">link</a>
      <a href="#">link</a>
    </p>
  </div>
</div>
        </body>
</html>

jquery 手风琴 header 索引

jquery accordion header index

jquery

dom

jquery-ui

accordion