所有受到相同事件处理程序影响的使用Jquery模板呈现的元素

Question

我正在使用JQuery模板呈现JSON数据源中的多个表。

表格呈现后，我附加了一个Jquery“悬停”事件处理程序（通过表CSS类）以突出显示表列。

悬停事件起作用，但会影响同一CSS类的所有呈现表 - 所以如果我将鼠标悬停在表1的第2列上，则所有我的表的第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

给一些其他类statsTable像这样一起。

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

，然后使用这个类作为一个选择

$(".hoverClass td")