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>

最优雅的方法是选择所有指定的选择器，无论它们是否被指示的任何其他选择器包裹？

修改

我知道我可以像

一样使用它

$('.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 ^[docs]将始终返回所选元素中的第一个元素的值（强调我的）：

获取匹配元素集中第一个元素的属性值。

this引用了两个选定的元素，第一个元素始终为.class1。

因此，您必须迭代对所选元素进行迭代，并单独访问每个元素的属性，就像@Eli shows in his answer一样。这是jQuery插件的常见模式。

jQuery Plugins/Authoring page也许值得一读。

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 *")

JQuery：多个选择器的自定义函数，其他一些选择器 - 仅选择最外面的选择器

3 个答案: