JQuery: пользовательская функция для нескольких селекторов, некоторые внутри других - выбирает только самый внешний

Question

Я читал здесь и там о нескольких селекторах JQuery, но я не смог получить ответ, который искал.

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

Последний селектор всегда вызывает самый внешний элемент из перечисленных. Вот что происходит:

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

Каков самый элегантный способ сделать так, чтобы он выбирал все указанные селекторы независимо от того, заключены ли они в какие-либо другие указанные селекторы?

EDIT:

Я знаю, что могу использовать это как

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

но я хочу связать его в один вызов (на самом деле я использую более 2 селекторов).

Answer 1

Это то, что вы пытаетесь сделать?

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

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

Answer 2

Ваша проблема не в множественном селекторе, а в том, как работает attr.

Во-первых, внутри метода плагина this уже ссылается на объект jQuery, нет необходимости передавать его вjQuery снова.
Во-вторых, attr ^{[документы]} всегда будет возвращать значение первого из выбранных элементов (выделение мое):

Получить значение атрибута для первого элемента в наборе соответствующих элементов.

this ссылается на два выбранных элемента,первый всегда будет .class1.

Поэтому вам нужно перебрать по выбранным элементам и получить доступ к атрибуту каждого элемента в отдельности, как показывает @ Eli в своем ответе.Это обычный шаблон для плагинов jQuery.

Возможно, стоит прочитать и страницу плагинов jQuery / страницу авторинга .

Answer 3

Если я правильно понимаю, у вас может быть следующий html:

<div class="class1" id="outer1">
    <div class="class2 inner">
        <div class="class1 inner">
            <div class="class2 inner">
            </div>
        </div>
    </div>
</div>
<div class="class2" id="outer2">
    <div class="class1 inner">
        <div class="class2 inner">
            <div class="class1 inner">
            </div>
        </div>
    </div>
</div>

И вы хотите такой селектор, как:

$(".class1, .class2");

Но отфильтрованы так, что выбираются только outer1 и outer2, а не класса inner, верно?

Следующее выберет все элементы любого класса, а затем исключит любые элементы, являющиеся потомками любого из классов, оставив таким образом только самого высокого предка любого класса, то есть самый внешний элемент:

$(".class1, .class2").not(".class1 *, .class2 *")