[jQuery] Re: Hover Effect on 2 rows

oops. posted my testing code. here's the right one:

$('.Row').each(function(){
var t = $(this), n = t.next('.Row'),
direction = n.length ? 'next' : 'prev';

t.hover(function(){
t[direction]('.Row').andSelf().addClass('hover');
},function(){
t[direction]('.Row').andSelf().removeClass('hover');
});

});

On Jan 26, 10:21 am, Ricardo Tomasi <ricardob...@gmail.com> wrote:
> There is a simpler way:
>
> $('.Row').each(function(){
>    var t = $(this), n = t.next('.Row'), direction = n.length ?
> 'next' : 'prev';
>   $(this).hover(function(){
>      t[direction]('.Row').andSelf().children('td').css
> ('background','red');
>   },function(){
>      t[direction]('.Row').andSelf().children('td').css
> ('background','yellow');
>   });
>
> });
>
> You could do it directly inside the hover() function, without each(),
> but cacheing the objects will improve performance.
>
> cheers,
> - ricardo
>
> On Jan 26, 8:29 am, jQuery Lover <ilovejqu...@gmail.com> wrote:
>
> > Hi Kevin,
>
> > NO, you can not wrap your tr's with div's or span's.
>
> > Unfortunately Olaf's script will not work also.
>
> > A little ugly script should do the job:
>
> > $(function(){
> >         $('.Row').hover(function(){
> >                 $(this).addClass('hover');
> >                 getNeighbor(this, 'Row').addClass('hover');
> >         },
> >         function(){
> >                 $(this).removeClass('hover');
> >                 getNeighbor(this, 'Row').removeClass('hover');
> >         })
> >         $('.AltRow').hover(function(){
> >                 $(this).addClass('hover');
> >                 getNeighbor(this, 'AltRow').addClass('hover');
> >         },
> >         function(){
> >                 $(this).removeClass('hover');
> >                 getNeighbor(this, 'AltRow').removeClass('hover');
> >         })
>
> > });
>
> > function getNeighbor(el, cls){
> >         if($(el).prev().hasClass(cls))
> >                 return $(el).prev();
> >         if($(el).next().hasClass(cls))
> >                 return $(el).next();
>
> > }
>
> > ----
> > Read jQuery HowTo Resource  -  http://jquery-howto.blogspot.com
>
> > On Mon, Jan 26, 2009 at 5:45 AM, kevind <kevint...@gmail.com> wrote:
>
> > > hi,
>
> > > i'm using JQuery to add a Class when a row is hovered over - i have it
> > > working, however, each row of data has 2 rows in the table - I want to
> > > have both rows change background color whenever i hover over either of
> > > them.  The table already has 'stripes' for alternating records and
> > > readability.
>
> > > I'm using function:
> > > =================
> > > $(function(){
> > >  $('.Row').hover(function(){
> > >    $(this).addClass('hover');
> > >  },
> > >  function(){
> > >    $(this).removeClass('hover');
> > >  })
> > >  $('.AltRow').hover(function(){
> > >    $(this).addClass('hover');
> > >  },
> > >  function(){
> > >    $(this).removeClass('hover');
> > >  })
> > > =================
>
> > > the table structure looks like this:
> > >     <table class="Grid" cellspacing="0" cellpadding="0">
> > >        <tr class="Caption">
> > >          <th>Comment</th>
> > >          <th>Created</th>
> > >        </tr>
> > >        <tr class="Row">
> > >                  <td>&nbsp;</td>
> > >          <td>&nbsp;</td>
> > >        </tr>
> > >         <tr class="Row">
> > >          <td>&nbsp;</td>
> > >          <td>&nbsp;</td>
> > >        </tr>
>
> > >        <!-- -->
> > >        <tr class="AltRow">
> > >          <td>&nbsp;</td>
> > >          <td>&nbsp;</td>
> > >        </tr>
> > >         <tr class="AltRow">
> > >          <td>&nbsp;</td>
> > >          <td>&nbsp;</td>
> > >        </tr>
> > >    </table>
> > > ==================
> > > the individual rows highlight using STYLE of  '  tr.hover td
> > > {background:yellow;}  '
>
> > > how do get the 2 TR's to highlight together at the same time when i
> > > float over the class 'Row' ?  Do i surround them with DIVs or SPAN?
> > > Is this possible to group 2 table rows inside another element and get
> > > the function to fire for both.
>
> > > thanks in advance for any help