jquery - jquery获取悬停的li的索引

Question

我要做的就是返回悬停的 i 的索引， ul 有一个类 .around

这看起来应该工作

$('.around li').on("mouseover", function(event){
var myindex =  $('.around').index(this);
console.log(myindex);
})

Answer 1

这个怎么样：

$('.around li').on("mouseover", function(event){
var myindex =  $(this).index();
console.log(myindex);
})

Answer 2

也许你正在尝试这样做：

var li = $('.around li');
li.on("mouseover", function(){
   var myindex = li.index(this);
   console.log(myindex);
})

小提琴示例：http: //jsfiddle.net/MKExb/

Answer 3

你可以这样写：

var listItem = document.getElementById('bar');
alert('Index: ' + $('li').index(listItem));

高温高压

Answer 4

你可以用这个

<script type="text/javascript">

      $(document).ready(function () {
            $('.around li').each(function () {
                $(this).bind('mouseover', null, function () {
                    var index = $('.around li').index(this);
                    console.log(index);
                });

            }, function () { });

        });

</script>

或更清洁的

 <script type="text/javascript">
    $(document).ready(function () {
        $('.around li').hover(function () {
            var index = $('.around li').index(this);
            console.log(index);
        }, function () { });

    }); 
    </script>

Answer 5

在性能方面，公认的答案很糟糕。缓存查询和使用委托要好得多，这样只会在 ul 上设置一个处理程序，然后将每个事件委托给鼠标所在的 li。我修改了原来的jsfiddle，看看，效果很好，代码也不长了：

http://jsfiddle.net/zhkjLoet/1/

var ul = $('.around'); // cache query
ul.on("mouseover","li", function(event){ //delegate events to li child
   var myindex = $(this).index();
   console.log(myindex);
})