Dealing with $(this) when there are multiple selector

Question

Now when there is effect like animate applied on multiple selector

$('.foo,.bar').animate({width: '250'}, 'slow',function(){
    console.log($(this));
});

The console log return twice for .foo and .bar

So how can I make other events based on this .foo only.

Something like this $(this)+'.foo' << this is wrong

I need to do other events based on the location of (this) .foo

Answer 1

Do a separate selector for $('.foo'), or filter the existing selector down with filter('.foo'). These would be best, early on, to bind animation/events onto the correct set of elements.

Or check, in the animate callback, whether $(this).is('.foo') or $(this).hasClass('foo'). This approach would be best if your animation/events are already bound but you need to figure out what kind of DOM element they've been triggered on.

Generally binding things exactly like you want (the first approach) is best, but it depends what exactly you're trying to do.

See:

• http://api.jquery.com/filter/
• http://api.jquery.com/is/
• http://api.jquery.com/hasClass/