所有受到相同事件處理程序影響的使用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")