返回悬停时span元素的索引号

Question

我有很多span标签，当我将鼠标悬停在3RD span标签上时，它应返回其位置，即“3”

<div class="main">
    <span class="spanClass"></span>
    <span class="spanClass"></span>
    <span class="spanClass"></span>
    <span class="spanClass"></span>
    <span class="spanClass"></span>
</div>

Answer 1

这很简单，你可以使用jQuery函数index()。

喜欢这样：

$('.spanClass').mouseenter(function(){
  var index = $(this).index()+1; // +1 because the index starts at 0
  $('.content').html('Number: '+index);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
    <span class="spanClass">First</span>
    <span class="spanClass">Second</span>
    <span class="spanClass">Third</span>
    <span class="spanClass">Fourth</span>
    <span class="spanClass">Fifth</span>
</div>
<p class="content"></p>

Answer 2

只需使用css：

＆＃13;

＆＃13;

.main {
  counter-reset: num 0;
}

span {
counter-increment: num;
}

span:hover:after {
  content: 'number: 'counter(num);
  position: absolute;
  top: 50px;
  left: 0;
  background-color: #CCC;
  padding: 2px;
  border-radius: 5px;
}

＆＃13;

<div class="main">
    <span class="spanClass">Span1 </span>
    <span class="spanClass">Span2 </span>
    <span class="spanClass">Span3 </span>
    <span class="spanClass">Span4 </span>
    <span class="spanClass">Span5 </span>
</div>

＆＃13;

＆＃13;

＆＃13;