Question

I have been reading here and there about multiple JQuery selectors but I couldn’t get the answer I was looking for.

$.fn.extend({
    sayHi:function() {
        console.log($(this).attr('class') + ' says hi');
    }
}
$('.class1,.class2').sayHi();

The last selector always calls the outermost item among the listed ones. Here’s what happens:

<div class="class1"><!-- only this one gets selected -->
    <div class="class2"></div>
</div>

What is the most elegant way to make it select all the indicated selectors no matter whether they’re wrapped by any other selector(s) indicated?

EDIT:

I know I can use it like

$('.class1').sayHi();
$('.class2').sayHi();

but I’m willing to bind it into a single call (I’m actually using more than 2 selectors).

Answer 1

Is this what you are trying to do?

(function ($) {
    $.fn.sayHi = function() {
        return this.each(function() {
            console.log($(this).attr('class') + ' says hi');
        });
    };
})(jQuery);

$('.class1, .class2').sayHi();