DOM中所有匹配元素的索引问题

时间:2013-08-23 15:36:45

标签: jquery

我意识到这可能与此issue

重复

我正在尝试选择具有相同类的任何元素的当前索引。

这是我的问题的一个例子。 http://jsfiddle.net/jMB45/2/

我在另一个问题中遵循了这个建议,但我仍然在第二组元素上收到'-1'。

HTML

<div class="members">
    <div class="row">
        <div class="col-sm-3 ">
            <div class="member">
                <span>Name</span>
                <span>Last Name</span>
                <span>Position</span>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="member">
                <span>Name</span>
                <span>Last Name</span>
                <span>Position</span>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="member">
                <span>Name</span>
                <span>Last Name</span>
                <span>Position</span>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="member">
                <span>Name</span>
                <span>Last Name</span>
                <span>Position</span>
            </div>
        </div>                                          
    </div>
</div>
<div class="profiles">
    <div class="profile active">
        <div class="row">
            <div class="bio col-md-6">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tempor et sapien non vestibulum. Ut dictum arcu libero, eu aliquet massa bibendum id. Sed a venenatis nisl, id pretium purus. Phasellus porta faucibus arcu in pellentesque. Maecenas viverra, lectus quis euismod cursus, elit magna blandit augue, nec tincidunt lectus orci sed nunc. Suspendisse est justo, ullamcorper in leo sed, facilisis varius tellus. 
                </p>
            </div>
            <div class="photo col-md-6">
            </div>
        </div>
    </div>
    <div class="profile"></div>
    <div class="profile"></div>
    <div class="profile"></div>
    <div class="profile"></div>
    <div class="profile"></div>
    <div class="profile"></div>
    <div class="profile"></div>
    <div class="profile"></div>
</div>
<div class="members">
    <div class="row">
        <div class="col-sm-3 ">
            <div class="member">
                <span>Name</span>
                <span>Last Name</span>
                <span>Position</span>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="member">
                <span>Name</span>
                <span>Last Name</span>
                <span>Position</span>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="member">
                <span>Name</span>
                <span>Last Name</span>
                <span>Position</span>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="member">
                <span>Name</span>
                <span>Last Name</span>
                <span>Position</span>
            </div>
        </div>                                          
    </div>
</div>

的jQuery

$(document).ready(function(){
    $('.member').click(function() {

        $('.member').removeClass('active');
        $(this).addClass('active');

        var members = $('.member');

        var current = members.index($('.active'))
        $('#index').html(current);

    });
});

1 个答案:

答案 0 :(得分:2)

尝试

$(document).ready(function(){
    var members = $('.member').click(function() {
        members.removeClass('active');
        $(this).addClass('active');

        var current = members.index(this); //pass the dom reference here
        $('#index').html(current);
    });
});

演示:Fiddle