jquery - jQuery:現在の上にある特定の最も近い/兄弟行を選択する

Question

マウスが C、D、E & F (写真 1 が強調表示されています) および K & L (写真 3 が強調表示されています) の上に移動したときに、クラス「img」の TD セルも強調表示されるように変更する必要があります。 「rowspan」が定義されている「最初の行」(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");
 });
});