Dynamic Add/Remove Class Jquery

Question

I am creating an autosuggest box that has a of suggestion returned to it, and I am trying to add/remove the class "searchsuggestinnerulhighlight" to individual links. Here is the dynamically returned ta

    <DIV id="searchsuggestinner">
    <UL id=searchsuggestinnerul>
    <LI>
    <A href="#" id="1" class = "hoverme" onMouseDown="searchsuggestSubmit('appalachian trail');">appalachian trail</A>
   </LI>
   </UL>
   </DIV>

And here is my jQuery:

 $(".hoverme").live("mouseover mouseout", function(event) {
    if ( event.type == "mouseover" ) {
       $("#" + mocount).removeClass("searchsuggestinnerulhighlight");
       mocount = $(this).attr('id');
       $("#" + mocount).addClass("searchsuggestinnerulhighlight");
    } else {
       $("#" + mocount).removeClass("searchsuggestinnerulhighlight");
    }
 });

Originally I had .css("background-color"... and now I've changed it to add class and remove class and it does not work. Any ideas?

Answer 1

Change:

$("#" + mocount).add("searchsuggestinnerulhighlight");

To:

$("#" + mocount).addClass("searchsuggestinnerulhighlight");

Answer 2

mocount = $(this).attr('id');
$("#" + mocount)

That's seriously dodgy jQuery!

First, you don't need attr to get the id . You can get it with this.id . This is far, far quicker.

Second, you don't need to get the id to get a jQuery selection containing the clicked element. Just use $(this) instead.

Finally, as Gabe has said, use addClass rather than add . So, all in all:

$(this).addClass('searchsuggestinnerulhighlight');

One other thing, though -- using a ID value starting with a number was not allowed in HTML before HTML5. Its behaviour is not guaranteed.

Answer 3

I would put this in a comment, but I can't. Implement lonesomeday's changes, but when he uses $(this).id, try just using this.id as 'this' should already be a jquery object. (We don't want $($(this)).)