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>