jQuery计算来自许多其他的当前div位置

Question

第1部分＆lt;＆lt;使用$（this）.index（）;

解决

假设我有以下div结构，其中父div没有id或class：

<div>
  <div class="myClass"></div>
  <div class="myClass"></div>
  <div class="myClass"></div>
  <div class="myClass"></div>
  <div class="myClass"></div>
  <div class="myClass"></div>
</div>

如何在鼠标悬停时使用jQuery获取当前div位置的警报？示例：当我将鼠标悬停在第3个.myClass div上时，我想收到“这是DIV第3号”。

第二部分 如果我得到以下结构怎么办？$（this）.index（）总是返回零，无论我正在徘徊哪一个？

<div>
  <div class="myClass"></div>
</div>
<div>
  <div class="myClass"></div>
</div>
<div>
  <div class="myClass"></div>
</div>
<div>
  <div class="myClass"></div>
</div>
<div>
  <div class="myClass"></div>
</div>

Answer 1

您可以在index()上使用mouseenter()方法：

$('div.myClass').mouseenter(function() {
  var idx = $(this).index() + 1;
  $('#output').text('THIS IS DIV NUMBER ' + idx);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="myClass">div1</div>
  <div class="myClass">div2</div>
  <div class="myClass">div3</div>
  <div class="myClass">div4</div>
  <div class="myClass">div5</div>
  <div class="myClass">div6</div>
</div>

<div id="output"></div>

对于你的第二个例子，你需要为index()提供一个选择器，因为元素不是所有兄弟姐妹：

$('div.myClass').mouseenter(function() {
  var idx = $(this).index('.myClass') + 1;
  $('#output').text('THIS IS DIV NUMBER ' + idx);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="myClass">div1</div>
</div>
<div>
  <div class="myClass">div2</div>
</div>
<div>
  <div class="myClass">div3</div>
</div>
<div>
  <div class="myClass">div4</div>
</div>
<div>
  <div class="myClass">div5</div>
</div>

<div id="output"></div>

Answer 2

$('.myClass').mouseenter(function() {

  alert("This is din number " + ($(this).index()+1) )

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <div class="myClass">1</div>
  <div class="myClass">2</div>
  <div class="myClass">3</div>
  <div class="myClass">4</div>
  <div class="myClass">5</div>
  <div class="myClass">6</div>
</div>

使用.index()

Answer 3

您可以使用index()功能：

$(document).on('mouseenter', '.myClass', function() {
  alert($(this).index() + 1);
});

.myClass { 
  padding:15px;
  border:1px solid #d8d8d8;
  margin:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div>
  <div class="myClass">1</div>
  <div class="myClass">2</div>
  <div class="myClass">3</div>
  <div class="myClass">4</div>
  <div class="myClass">5</div>
  <div class="myClass">6</div>
</div>