jQuery：选择当前上方的特定最近/同级行

Question

当鼠标移到 C、D、E 和 C、D、E 上时，必须进行哪些更改才能使“img”类的 TD 单元也突出显示。 F（图1突出显示）和K＆amp; L（图 3 突出显示）-不仅在定义“行跨度”的“第一行”（A、B、G、H 和 J）？

<table class="stripeMe" border="1">             
  <tr class="row1">                 
    <td rowspan="3" class="img">Pic 1</td>
    <td>- A -</td>
    <td>- B -</td>                 
  </tr>                  
  <tr>
    <td>- C -</td>
    <td>- D -</td>                 
  </tr>             
  <tr>
    <td>- E -</td>    
    <td>- F -</td>                 
  </tr>             
  <tr class="row1">                 
    <td rowspan="1" class="img">Pic 2</td>
    <td>- G -</td>    
    <td>- H -</td>                 
  </tr>          
  <tr class="row1">                 
    <td rowspan="2" class="img">Pic 3</td>       
    <td>- I -</td>    
    <td>- J -</td>                 
  </tr>                  
  <tr>      
    <td>- K -</td>    
    <td>- L -</td>                 
  </tr>             
</table>   

要尝试的CSS

tr.over td {
  background-color: #f70;
}

jQuery

$(document).ready(function(){
     $(".stripeMe tr").mouseover(function() {
        $(this).addClass("over");}).mouseout(function(){
            $(this).removeClass("over");});
});

代码示例： http://jsfiddle.net/9krDS/

Answer 1

试试这个

$(document).ready(function(){
  $(".stripeMe").delegate("td", "mouseover", function() {
     if($(this).closest("tr").hasClass("row1")){
        $(this).closest("tr").find(".img").addClass("over");
     } 
     else{
         var tr =  $(this).closest("tr");
         while(!tr.hasClass("row1")){
            tr =  tr.prev("tr");   
         }       
         tr.find(".img").addClass("over");                   
     }

 })
 .delegate("td", "mouseout", function(){
        $(this).closest(".stripeMe").find(".img").removeClass("over");
 });
});