Or if you have just one ul on your page, simply: $('ul li').hover( function () { $(this).addClass("columnSelected"); }, function () { $(this).removeClass("columnSelected"); } );
You may find "jQuery HowTo" useful - http://jquery-howto.blogspot.com On Fri, Jan 9, 2009 at 10:47 PM, Paul Mills <paul.f.mi...@gmail.com> wrote: > > Hi, > > I assume the <li> elements are wrapped in a <ul>. So first give the > <ul> a unique ID so it's easy to identify. So code looks a bit like > this: > <ul id="columns"> > <li class="column1">column 1</li> > <li class="column2">column 2</li> > <li class="column3">column 3</li> > </ul> > > Now you can code the one jQuery command to operate on all <li>s within > the <ul>: > $('#columns li').hover( > function () { > $(this).addClass("columnSelected"); > }, > function () { > $(this).removeClass("columnSelected"); > } > ); > > Paul > > On Jan 8, 2:53 pm, zibi <newslet...@szymczyk.eu> wrote: >> I have something like this: >> >> $("li.column1").hover( >> function () { >> $("li.column1").addClass("columnSelected"); >> }, >> function () { >> $("li.column1").removeClass("columnSelected"); >> } >> ); >> >> $("li.column2").hover( >> function () { >> $("li.column2").addClass("columnSelected"); >> }, >> function () { >> $("li.column2").removeClass("columnSelected"); >> } >> ); >> >> $("li.column3").hover( >> function () { >> $("li.column3").addClass("columnSelected"); >> }, >> function () { >> $("li.column3").removeClass("columnSelected"); >> } >> ); >> >> .... and so on ... >> >> $("li.column31").hover( >> function () { >> $("li.column31").addClass("columnSelected"); >> }, >> function () { >> $("li.column31).removeClass("columnSelected"); >> } >> ); >> >> So I have 31 times the same thing only class number is changing. How >> can I do this i simpler way? >> >> Thanks