jquery accord header index

jquery accordionjquery accord header index

Мне нравится получать индекс h3 внутри «xaccordion». Только одна ссылка в аккордеоне будет иметь класс «active» (также может быть идентификатором, но я сделал его классом)

Как получить индекс. теперь элемент не имеет значения, а индекс возвращает -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);

источник

2015-10-21 Babulaas

Почему вы получили кучу кода внутри элемент H3? И вы не закрыли его должным образом - это немного беспорядок на самом деле - что именно вы пытаетесь сделать? –

Я забыл добавить текст в заголовки. В принципе, я хочу получить индекс H3. моя ссылка - это a.active ниже в dom. Также этот html отображается javascript. в источнике у меня есть только

– Babulaas

Я изменил свой 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() в thi . Как вы построили 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/

источник

2015-10-21 12:40:41

Спасибо. для обратной связи, но он все равно возвращает -1. Html обрабатывается javascript. он не объявлен в источнике/шаблоне. – Babulaas

Это не имеет значения, когда элементы находятся в DOM. Вы называете Javascript после отображения HTML? –

Я установил его с помощью счетчика, который у меня уже был в моей функции. Счетчик предназначен для предоставления разделов панели и уникального идентификатора. Я предпочитаю индексный подход, он намного чище и экономичен. Я еще раз посмотрю в своем коде, чтобы исправить это. пока он работает. Спасибо за ваш отзыв. – Babulaas

попробовать этот код .. надеюсь, что это работает ... сделал некоторые изменения, т.е. закрывающий тег и т.д.

<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>

источник

2015-10-21 12:42:23

jquery accord header index

ответ

Смежные вопросы