Question

jquery手风琴

我喜欢在“xaccordion”中获取h3的索引。只有手风琴中的一个链接会使类“活跃”（也可以是一个id，但我把它变成了一个类）

我如何获得索引。现在元素不是fount，索引返回-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"。这应该会给你以后的结果。

编辑：这是一个小提琴 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手风琴标题索引

2 个答案: