Jqueryテンプレートでレンダリングされた要素はすべて同じイベントハンドラの影響を受けます

Question

JQueryテンプレートを使用して、JSONデータソースからいくつかのテーブルをレンダリングしています。

テーブルがレンダリングされたら、テーブルの列を強調表示するためにJquery "hover"イベントハンドラを（テーブルCSSクラスを介して）添付します。

hoverイベントは機能しますが、同じCSSクラスのすべてのレンダリングされたテーブルに影響します。したがって、表1の列2にカーソルを合わせると、ALL表の列2も強調表示されます。

テーブルごとに個別のIDを付けない方がいいでしょう。

私はいくつかのグーグルを行っているとホバーイベントハンドラではJQueryの使用「）（最も近い」有望なようだが、私は、正しい使用方法を理解することはできません:(

すべてのヘルプは非常に高く評価されるだろう。

$(document).ready(function() { 
    drawRows(); 
    setColumnHover(); 
}); 

function drawRows() { 
    var jsonData = jQuery.parseJSON(getJsonString()); 
    $("#tableTemplate").tmpl(jsonData).appendTo("#funnelBody"); 
    } 

function setColumnHover() { 
    /* Ref: http://www.local-guru.net/blog/2010/10/29/table-column-highlighting-with-jquery */ 
    $(".statsTable td").hover(
     function() { 
      var idx = $(this).parent().children('td,th').index($(this)) + 1; 
      if (idx > 1) { 
       $('td:nth-child(' + idx + ')').addClass('hover'); 
       $('th:nth-child(' + idx + ')').addClass('hover'); 
      } 
     } 
     , 
     function() { 
      var idx = $(this).parent().children('td,th').index($(this)) + 1; 
      if (idx > 1) { 
       $('td:nth-child(' + idx + ')').removeClass('hover'); 
       $('th:nth-child(' + idx + ')').removeClass('hover'); 
      } 
     } 
    ); 
} 

///////////// Rendered HTML 
<table class="statsTable"> 
    <tr> 
     <td>...</td> 
     <td>...</td> 
    </tr> 
    <tr> 
     <td>...</td> 
     <td>...</td> 
    </tr> 
</table> 

Answer 1

「名前」ではなく「this」でクラスを割り当てることに専念する必要があります。以下は、そのトリックを行う必要があります。

$(".statsTable td").hover(
    function() {  
     $(this).addClass('hover'); 
    }, 
    function() { 
     $(this).removeClass('hover'); 
    } 
); 

Answer 2

///////////// Rendered HTML 
<table class="statsTable hoverClass"> 
    <tr> 
     <td>...</td> 
     <td>...</td> 
    </tr> 
    <tr> 
     <td>...</td> 
     <td>...</td> 
    </tr> 
</table> 

。このようなstatsTable何かと一緒に他のいくつかのクラスを与え、その後、セレクタとしてこのクラスを使用