從其父級子級數組列表中獲取元素的數組索引

Question

我的情況是我有一個表，每個表中的單元格都是一系列的div。 將鼠標懸停在表格中的div之一上后，我希望各個標簽更改其背景顏色。 標簽具有與其他標簽不同的div類。

因此，我在想的是要懸停的div和標簽都在同一表行（tr）元素中。 包含標簽div的單元格（td）與其他單元格具有不同的類。 標簽div與div的關系為1：1。

因此，ParentCell.DivImHoveringOver [arrayIndex] = LabelCell.LabelDivIWantToChange [arrayIndex]。 我的觀點是，其父級子級數組列表中的兩個元素的數組索引都相同，因此在將鼠標懸停在另一個div上時，可以使用它來更改標簽div。

我該怎么做呢？

我想可能是這樣的：

$('.table-day-detail-container').hover(
function() { //On hover entry
    //Get array index of this element from it's parents children array list.
    //Use that index to change background colour of another elements child node with that same array index
},
function() {//On hover exit
    //Revert background colour 
 }
);

我將要懸停在表格單元格中的元素：

<td class="table-day">
    <div class="table-day-detail-container">Test1</div>
    <div class="table-day-detail-container">Test2</div>
</td>

表格單元格中的元素是將鼠標懸停在相應元素上時要修改的標簽

<td class="table-day-label">
    <div class="table-day-labels">Label1</div>
    <div class="table-day-labels">Label2</div>
</td>

Answer 1

您可以使用.index（）之類的

$('.table-day-detail-container').hover(function () {
    var $this = $(this),
        index = $this.index();
    $this.parent().next().children('.table-day-labels').eq(index).css('background', 'red');
}, function () {
    var $this = $(this),
        index = $this.index();
    $this.parent().next().children('.table-day-labels').eq(index).css('background', '');
});

演示： 小提琴