Home/ Questions/Q 7509285
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T22:51:39+00:00

I have a javaScript function that loops through a variable number of iterations and

  • 0

I have a javaScript function that loops through a variable number of iterations and spits HTML to the DOM / Webpage. Thus after the loop it fills the following div:

  <div class="energyRowContainer" id="energyRowContainer">

  </div>

like so…

<div class="energyRowContainer" id="energyRowContainer">

<div id="energyRow0" class="energyRow">
<div class="energyTypeHead"> 1.2.2012 </div><div class="energyUnitMWH"> 93 </div><div class="energyUnitT"> 174 </div><div class="energyUnitM3_1"> 6594 </div><div class="energyUnitM3_2"> 116 </div><div class="energyUnitM3_3"> 34162 </div><div class="energyUnitM3_4"> 2625 </div><div class="energyUnitM3_5"> 17886 </div> <div class="energyUnitM3_6"> 21 </div>
</div>

<div id="energyRow1" class="energyRow">
<div class="energyTypeHead"> 1.2.2012 </div><div class="energyUnitMWH"> 93 </div><div class="energyUnitT"> 174 </div><div class="energyUnitM3_1"> 6594 </div><div class="energyUnitM3_2"> 116 </div><div class="energyUnitM3_3"> 34162 </div><div class="energyUnitM3_4"> 2625 </div><div class="energyUnitM3_5"> 17886 </div> <div class="energyUnitM3_6"> 21 </div>
</div>

<div>

now I’d like to use Jquery or CSS to change the background color of the whole row (class=”energyRow”) however simply creating a energyRow:hover doesn’t work as I’m hovering over the child divs… I’ve thought about using like this but I”m getting nowhere… any ideas anyone?

$('#energyRowContainer > .energyRow, ').hover(function() {
    $(this).parent().toggleClass('name_of_a_hover_class');
});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I believe your issue was that you were adding the elements to the DOM dynamically but not using event delegation binding methods like .delegate(). This can be done with CSS though (which will be good for performance, although adding a class to an element via JS doesn’t create much more overhead):

    #energyRowContainer .energyRow:hover {
    background : yellow;
}

    Here is a demo: http://jsfiddle.net/zNWGL/

    Also, you were so close, all you needed to do was remove the .parent() from your selection. Here is a demo of your code sans the .parent(): http://jsfiddle.net/zNWGL/1/

    • 0