apply jquery selector to object corresponding to hover

For some reason .add on the last line doesn't work as expected, all the :fir开发者_JAVA技巧st-child in the document are modified, I want only the :first-child from the hovered object to be modified. I tried everything I could think of, have no idea what the problem is.

jQuery.fn.img=function(background,param,repeat)
    { $(this).css('background-image','url(/static/img/'+background+'.png')
             .css('background-repeat',repeat)
             .css('background-position',param+' top');}

$('#sliding-door li').hover(function(e)
{$(this).img('b1_middle_focus','left','repeat-x');
 $(this).add(':first-child span').img('b1_left_focus','left','no-repeat');},

The html:

<ul>
          <li><a href="/href1"><span><span>Something</span></span></a></li>
          <li><a href="/href2"><span><span>Another thing</span></span></a></li>
 </ul>

Update

I see what you're trying to do now. If you still need the hover function to apply on all the lis, while testing for the first child for just one subroutine, you can use an if statement:

$('#sliding-door li').hover(function(e) {
    $(this).img('b1_middle_focus','left','repeat-x');

    if ($(this).is(':first-child')) {
        $(this).find('span').img('b1_left_focus','left','no-repeat');
    }
}, ...);

Old answer, ignore

If you're looking for the span in the first child of $(this), you meant to use $(this).find() rather than $(this).add():

$(this).find(':first-child span').img('b1_left_focus','left','no-repeat');

.add() adds all the elements matched by the :first-child span selector on a document level to the $(this) object, which isn't quite what you expect it to do. See the jQuery docs: http://api.jquery.com/add