查找 jQuery 对象是否包含在另一个 jQuery 对象中

Question

假设我有一些运行如下的 jQuery：

var myVar1 = $('.myClass1, .myClass2');
myFunction(myVar1); // Does something to element myVar1

var myVar2 = $('#myId').parent();
myFunction(myVar2); // Does something to element myVar2

这就是问题所在。有时#myId 的父元素是它自己的元素，但有时它也有类.myClass1 或.myClass2。但是，我不想在 #myId 的父级上运行 myFunction() 两次。

所以 html 可能是这样的：

<div class="myClass1"></div>
<div class="myClass1"></div>
<div class="myClass2"></div>
<div>    
    <div id="myId"></div>
</div>

或者是这样的：

<div class="myClass1">
    <div id="myId"></div>
</div>
<div class="myClass1"></div>
<div class="myClass2"></div>

jQuery 只需要对每个<div> 调用一次函数。

如何检测myVar2 是否包含在myVar1 中？

Answer 1

引用你的话，

如何检测 myVar2 是否包含在 myVar1 中？

您的每个变量都返回一个 jQuery 对象，这确实很棒。如果你想知道一个 jQuery 对象在其返回的集合中是否包含另一个 jQuery 对象，你可以use jQuery's index() method.

来自index()：

如果在元素集合上调用 .index() 并传入 DOM 元素或 jQuery 对象，则 .index() 返回一个整数，指示所传递元素相对于原​​始集合的位置。

所以我们知道如果它存在于myVar1 中，我们可以合理地得到一个等于或大于零的数字来表示另一个jQuery 对象的索引，否则如果它不存在，我们得到-1。

如果var myVar2 = $('#myId').parent(); 包含在var myVar1 = $('.myClass1, .myClass2') 中，则运行myVar1.index(myVar2) 将返回一个大于或等于零的数字。否则-1。

希望有帮助！

Answer 2

您可以使用jQuery not selector 来执行此操作，它会从集合中删除匹配的元素。要修改您的示例：

var one = $('.myClass1, .myClass2');
myFunction(one); // Does something to element myVar1

var two = $('#myId').not(one).parent();
myFunction(two); // Does something to element myVar2

对第二个选择的修改将使#myId仅在元素没有附加了.myClass1或.myClass2类时被选中。