jQuery计数当前div位置从许多其他

Question

第一部分 < <解决使用$（this）.index（）;

比方说，我有以下的div结构，其中父DIV没有ID或类：

<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上时，我想要收到“THIS IS DIV NUMBER 3”。

第二部分 而如果我有以下结构，其中$（本）的.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

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

$('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>