title: Getting array index of an element from it's parents children array list
body: <p>My situation is that I have a table and within each table cells are a series of divs. Upon hovering over one of the divs in the table, I want the respective label to change it's background colour. The label has a separate div class than the others.</p>
  
  <p>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. The cell (td) that contains the label divs has a separate class from the other cells. The relationship of label divs to divs is 1:1.</p>
  
  <p>Therefore, 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.</p>
  
  <p>How do I do this?</p>
  
  <p>I imagine it'd be something like this:</p>
  
  <pre><code>$('.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 
   }
  );
  </code></pre>
  
  <p>The elements within table cell I'll be hovering over::</p>
  
  <pre><code>&lt;td class="table-day"&gt;
      &lt;div class="table-day-detail-container"&gt;Test1&lt;/div&gt;
      &lt;div class="table-day-detail-container"&gt;Test2&lt;/div&gt;
  &lt;/td&gt;
  </code></pre>
  
  <p>The elements within table cell which are labels to be modified upon hovering over respective element</p>
  
  <pre><code>&lt;td class="table-day-label"&gt;
      &lt;div class="table-day-labels"&gt;Label1&lt;/div&gt;
      &lt;div class="table-day-labels"&gt;Label2&lt;/div&gt;
  &lt;/td&gt;
  </code></pre>