jQuery | :has() 选择器示例

jQuery 的 :has() 选择器用于选择包含特定元素的父元素。例如，你可以使用 :has() 选择器选择包含特定类或 ID 的元素的祖先元素。

语法

以下是 :has() 选择器的基本语法：

$(selector).has(filter)

其中：

• selector：用于选择要检查是否包含 filter 元素的父元素的基本选择器。
• filter：指定要查找的子元素的选择器。

示例

现在，让我们看看 :has() 选择器的几个示例：

示例 1：选择包含特定 ID 的祖先元素

要选择包含 #my-id 元素的祖先元素，你可以使用以下代码：

$(document).ready(function(){
  var $parent = $('#my-id').parents().has('#my-id');
  console.log($parent);
});

这将选择所有祖先元素，它们包含 #my-id 元素。

示例 2：选择包含特定类的祖先元素

要选择所有包含 my-class 类的祖先元素，你可以使用以下代码：

$(document).ready(function(){
  var $parent = $('.my-class').parents().has('.my-class');
  console.log($parent);
});

这将选择所有祖先元素，它们包含 my-class 类。

示例 3：选择包含特定子元素的祖先元素

要选择包含特定子元素（例如，ul 元素）的祖先元素，你可以使用以下代码：

$(document).ready(function(){
  var $parent = $('ul').parents().has('ul');
  console.log($parent);
});

这将选择所有祖先元素，它们包含 ul 子元素。

总结

现在你已经了解了 :has() 选择器的语法和几个示例，你应该可以在自己的项目中使用它来选择包含特定元素的父元素。