简体   繁体   English

从其父级子级数组列表中获取元素的数组索引

[英]Getting array index of an element from it's parents children array list

My situation is that I have a table and within each table cells are a series of divs. 我的情况是我有一个表,每个表中的单元格都是一系列的div。 Upon hovering over one of the divs in the table, I want the respective label to change it's background colour. 将鼠标悬停在表格中的div之一上后,我希望各个标签更改其背景颜色。 The label has a separate div class than the others. 标签具有与其他标签不同的div类。

So, what I was thinking is that both the div that is going to be hovered over and the label are in the same table row (tr) element. 因此,我在想的是要悬停的div和标签都在同一表行(tr)元素中。 The cell (td) that contains the label divs has a separate class from the other cells. 包含标签div的单元格(td)与其他单元格具有不同的类。 The relationship of label divs to divs is 1:1. 标签div与div的关系为1:1。

Therefore, ParentCell.DivImHoveringOver[arrayIndex] = LabelCell.LabelDivIWantToChange[arrayIndex]. 因此,ParentCell.DivImHoveringOver [arrayIndex] = LabelCell.LabelDivIWantToChange [arrayIndex]。 My point is that the array index of both elements from their parents children array list is the same, so I can use that to change the label div upon hovering over another div. 我的观点是,其父级子级数组列表中的两个元素的数组索引都相同,因此在将鼠标悬停在另一个div上时,可以使用它来更改标签div。

How do I do this? 我该怎么做呢?

I imagine it'd be something like this: 我想可能是这样的:

$('.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 
 }
);

The elements within table cell I'll be hovering over:: 我将要悬停在表格单元格中的元素:

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

The elements within table cell which are labels to be modified upon hovering over respective element 表格单元格中的元素是将鼠标悬停在相应元素上时要修改的标签

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

You can use .index() like 您可以使用.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', '');
});

Demo: Fiddle 演示: 小提琴

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM