Выделите целую строку при наведении

Question

У меня есть функция javaScript, которая перебирает переменное число итераций и накладывает HTML на DOM/WEB-страницу. Таким образом, после цикла он заполняет следующий DIV:

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

    </div> 

как так ...

<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> 

теперь я хотел бы использовать Jquery или CSS, чтобы изменить цвет фона всей строки (класс = "energyRow"), но просто создавая powerRow: зависание не работает, поскольку я нависаю над дочерними divs ... Я думал об использовании, подобном этому, но я нигде не собираюсь ... каких-либо идей кого-либо?

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

Answer 1

Я считаю, что ваша проблема заключалась в том, что вы добавляли элементы в DOM динамически, но не использовали методы привязки делегирования событий, такие как .delegate(). Это может быть сделано с помощью CSS, хотя (что будет хорошо для производительности, хотя добавление класса к элементу через JS не создает гораздо больше накладных расходов):

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

Вот демо: http://jsfiddle.net/zNWGL/

Кроме того, вы были так близко, все, что вам нужно было сделать, это удалить .parent() по вашему выбору. Вот демы ваш код SANs .parent(): http://jsfiddle.net/zNWGL/1/

Answer 2

Помогло ли это?

$('#energyRowContainer').find('.energyRow').hover(function() { 
    $(this).parent().addClass('name_of_a_hover_class'); // On hover 
}, function() { 
    $(this).parent().removeClass('name_of_a_hover_class'); // On not hover 
}); 

Не забудьте добавить это после того, как вы закончили или закончили свое мероприятие.

Answer 3

Проблема в коде является то, что вы используете $(this).parent(), который выбирает родительский элемент, который вы парили, и переключив класс на нем.

Вам просто нужно использовать $(this), он укажет на контейнер, на котором вы навешивали, и включите класс.

Кроме того, поскольку элементы добавляются динамически, вы должны использовать delegate на on (добавлено в JQuery 1.7)

Использование delegate:

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

Использование on:

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

Однако вы можете достичь этого поведения с помощью чистого CSS.

.energyRow:hover { 
    background : whateverColor; 
} 

• .delegate() ссылка - http://api.jquery.com/delegate/
• .on() ссылка - http://api.jquery.com/on/