ホバー上の行全体をハイライト表示

Question

私は、可変回数の繰り返しをループし、HTMLをDOM/Webページに吐き出すJavaScript関数を持っています。したがって、それは次の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"）しかし、単純にenergyRowを作成する：私は子供のdivs上に浮かんでいるので、ホバーは動作しません...私はこのように使用することについて考えましたが、私はどこにもない...任意のアイデアの誰ですか？

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

Answer 1

あなたの問題は、DOMに要素を動的に追加していましたが、.delegate()のようなイベント委譲バインドメソッドを使用していなかったと思います。 （JSを経由して要素にクラスを追加すると、より多くのオーバーヘッドを作成しませんが、パフォーマンスのために良いことになる）しかしこれはCSSで行うことができます：ここでは

#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 
}); 

divを入力した後、または準備完了イベントでこれを忘れずに追加してください。

Answer 3

あなたのコード内の問題は、あなたが上の推移要素の親を選択している$(this).parent()を使用して、その上にクラスをトグルしていることです。

あなたはちょうど$(this)を使用しなければなりません。それはあなたが乗っていたコンテナを指し示し、その上でクラスをトグルします。要素が動的に追加されているので

また、あなたはdelegateを使用してon上delegateが

（jQueryの1.7で追加）を使用する必要があります

$('#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/