Получить индекс DIV с классом, равным активным

Question

У меня есть Twitter Bootstrap карусель:

<div id="myCarousel" class="carousel slide"> 
    <div class="carousel-inner"> 
     <div class="item"> 
      <div id="container"></div> 
     </div> 
     <div class="item active"> 
      <div id="container2"></div> 
     </div> 
     <div class="item"> 
      <div id="container3"></div> 
     </div> 
    </div> 
    <!-- Controls --> 
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">«</a> 
    <a class="right carousel-control" href="#myCarousel" data-slide="next">»</a> 
</div> 

Теперь, когда я нажимаю на, напр. кнопка. Я хотел бы иметь индекс элемента с классом = 'active'. В этом примере это будет второй div, поэтому index = 1 (начинается с 0).

Чтобы получить DIV с классом = «активный» Я делаю это:

var activediv = $('.item').find('.active'); 

Но когда я хочу, чтобы найти индекс элемента, как это:

var index = activediv.index(); 

Я всегда получаю " -1 "в моей консоли, поэтому он не может найти элемент ... Но почему?

Кто-нибудь знает, что я делаю неправильно?

Answer 1

.index() - это функция в оберточном элементе.

Также active не умерший от item, это дополнительный фильтр для item элементов - так что вам нужно использовать .filter() вместо .find()

var activediv = $('.item').filter('.active');//or $('.item.active') 
var index = activediv.index(); 

Answer 2

Вы всегда можете добавить свойство данных в целевом элементе. Что-то вроде этого.

<div class="item active" data-something="1"> 
var index=$('.active').data('something');