JQuery：用于多个选择器的自定义函数，其中一些选择器位于其他选择器的内部-仅选择最外层的选择器

我到处都在读关于多个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>

---

但是我愿意将它绑定到一个调用中（实际上我使用了两个以上的选择器）。

这就是您想要做的吗

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

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

---

这就是你想做的吗

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

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

---

您的问题不在于多选择器，而在于

attr

的工作方式

首先，在plugin方法中，

this

已经引用了jQuery对象，不需要再次将其传递给jQuery。
其次，将始终返回所选元素中第一个元素的值（emphasis mine）：

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

此

引用两个选定的元素，第一个元素始终是

.class1

因此，您必须迭代选定的元素，并单独访问每个元素的属性，正如所做的那样。这是jQuery插件的常见模式

---

这可能也值得一读。

您的问题不在于多重选择器，而在于

attr

的工作方式

首先，在plugin方法中，

this

已经引用了jQuery对象，不需要再次将其传递给jQuery。
其次，将始终返回所选元素中第一个元素的值（emphasis mine）：

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

此

引用两个选定的元素，第一个元素始终是

.class1

因此，您必须迭代选定的元素，并单独访问每个元素的属性，正如所做的那样。这是jQuery插件的常见模式

---

这可能也值得一读。

如果我理解正确，您可能有以下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>

但是经过筛选，只有

outer1

和

outer2

被选中，而不是

internal

类的，对吗

下面将选择任一类的所有元素，然后排除任一类的任何子元素，从而只留下任一类的最高祖先，即最外层的元素：

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

---

如果我理解正确，您可能有以下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>

但是经过筛选，只有

outer1

和

outer2

被选中，而不是

internal

类的，对吗

下面将选择任一类的所有元素，然后排除任一类的任何子元素，从而只留下任一类的最高祖先，即最外层的元素：

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

---

---

我想这正是我想要的，尽管我不认为

。每一个
都能实现。谢谢。我想这正是我想要的，尽管我不认为
。每一个
都能实现。谢谢。在我的真实代码中，我指的是一个数据项（之前已分配给所有选择器），但有趣的是，它一直捕捉最外层的选择器，就像我在这里的示例中一样。非常感谢。@inhan:
.data
的行为与检索存储数据的方式相同：“返回jQuery集合中第一个元素的命名数据存储中的值，由数据（名称、值）设置。”。文档通常会告诉您方法是否仅应用于第一个或所有元素。一般来说，每当一个方法返回一个值，并且您知道它是一个字符串，它很可能是来自第一个元素的某个值。否则，它将不得不从每个元素返回一个包含一个值的数组。没想到它也会应用于数据。再次感谢：）在我的真实代码中，我指的是一个数据项（之前已分配给所有选择器），但有趣的是，它一直捕捉最外层的选择器，就像我在这里的示例中一样。非常感谢。@inhan:
.data
的行为与检索存储数据的方式相同：“返回jQuery集合中第一个元素的命名数据存储中的值，由数据（名称、值）设置。”。文档通常会告诉您方法是否仅应用于第一个或所有元素。一般来说，每当一个方法返回一个值，并且您知道它是一个字符串，它很可能是来自第一个元素的某个值。否则，它将不得不从每个元素返回一个包含一个值的数组。没想到它也会应用于数据。再次感谢：）这个结构和我的有点不同。我并不是想消除任何东西。根据您的示例，我尝试选择所有
$（'.class1'）
和
$（'.class2'）
项。我希望它能选择那里所有的演员@Eli的解决方案似乎已经解决了这个问题。我不清楚目标是什么。您不是在试图消除元素中两者匹配的元素吗？哦，我误读了代码示例。我以为你只想选第一个。您的意思是只选择了一个，而这不是您想要的。如果是这样，美元（“[class]”）会不会选择全部，脱离您的示例？别再犹豫了。我要重读这个问题，安静一会儿。这个结构和我的有点不同。我并不是想消除任何东西。根据您的示例，我尝试选择所有
$（'.class1'）
和
$（'.class2'）
项。我希望它能选择那里所有的演员@Eli的解决方案似乎已经解决了这个问题。我不清楚目标是什么。您不是在试图消除元素中两者匹配的元素吗？哦，我误读了代码示例。我以为你只想选第一个。你的意思是只有一个被选中，这不是你想要的