我有以下div結構：
<div class="0">
<div class="test"></div>
</div>
<div class="1">
<div class="test"></div>
</div>
<div class="2">
<div class="test"></div>
</div>
<div class="3">
<div class="test"></div>
</div>
例如，如果我將滑鼠懸停在 1st class: 上document.getElementbyClassName('test')[0]，我應該得到索引值為 0。
編輯：我正在尋找一個純 JS 解決方案
uj5u.com熱心網友回復：
您可以使用以下代碼：
$('.test').mouseenter(function() {
console.log("index: " $(this).index('.test'));
})
顯示代碼片段
$('.test').mouseenter(function() {
console.log("index: " $(this).index('.test'));
}).test {
height: 100px;
width: 100px;
border: 1px solid blue;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>uj5u.com熱心網友回復：
你可以用 jQuery 試試這個：
$('.test').mouseenter(function() {
console.log("index: " $(this).index('.test'))
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test">Hover me</div>
<div class="test">Hover me</div>
<div class="test">Hover me</div>
<div class="test">Hover me</div>uj5u.com熱心網友回復：
要在純 JS 中執行此操作，您可以使用它querySelectorAll()來檢索目標元素并將mouseenter事件處理程式系結到它們。然后，您可以通過將其與父項中的子項集合進行比較來找到觸發事件的元素的索引。像這樣的東西：
let elements = document.querySelectorAll('.test');
elements.forEach(el => el.addEventListener('mouseenter', e => {
let index = Array.from(elements).indexOf(e.target);
console.log(index);
}));<div class="1">
<div class="test">Test 1</div>
</div>
<div class="2">
<div class="test">Test 2</div>
</div>
<div class="3">
<div class="test">Test 3</div>
</div>
<div class="4">
<div class="test">Test 4</div>
</div>uj5u.com熱心網友回復：
此代碼使用純 java 腳本：
var divItems = document.querySelectorAll(".test");
var mytab = [];
var index = 0;
for (let i = 0; i < divItems.length; i ) {
mytab.push(divItems[i].innerHTML);
}
for (var i = 0; i < divItems.length; i )
{
divItems[i].onmouseover = function ()
{
index = mytab.indexOf(this.innerHTML);
console.log(this.innerHTML " Index = " index);
};
}<div class="test">Hover me 1</div>
<div class="test">Hover me 2</div>
<div class="test">Hover me 3</div>
<div class="test">Hover me 4</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/467527.html
標籤：javascript html css