获取等于活动类的div索引

Question

I have a twitter bootstrap carousel with :

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

Now when I click on, for ex. a button. I would like to have the index of the item with class = 'active'. In this example it would be the second div, so index = 1 (starts from 0).

To get the div with class = "active" I do this:

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

But when I want to find the index of the element like this:

var index = activediv.index();

I always get "-1" in my console, so he can't find the item ... But why?

Does anyone knows what I'm doing wrong?

Answer 1

.index() is a function in the wrapper element.

Also active is not a decedent of item , it is a additional filter to the item elements - so you need to use .filter() instead of .find()

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

Answer 2

You can always add data property to your targeted element. Something like this.

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