jquery 选择不含后代元素的元素

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。jQuery 选择器允许开发者通过各种方式查找和操作 DOM 元素。

类型

jQuery 选择器有多种类型，包括基本选择器、层次选择器、过滤选择器和属性选择器等。

应用场景

jQuery 选择器广泛应用于网页开发中的元素选择和操作，例如：

动态修改页面内容
绑定事件处理程序
实现动画效果

问题：选择不含后代元素的元素

假设我们有一个 HTML 结构如下：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>
<div class="container">Empty Container</div>

我们希望选择那些没有子元素的 .container 元素。

原因

直接使用 jQuery 选择器无法直接实现这个需求，因为 jQuery 没有内置的选择器来直接选择没有子元素的元素。

解决方法

我们可以使用 :empty 伪类选择器来选择没有子元素的元素，但这个选择器只能选择完全空的元素（即没有任何内容，包括文本节点）。为了选择没有子元素的 .container 元素，我们可以使用以下方法：

$('.container').filter(function() {
  return $(this).children().length === 0;
});

或者使用更简洁的写法：

$('.container').filter(':not(:has(*))');

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery Selectors Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
  <div class="container">Empty Container</div>

  <script>
    $(document).ready(function() {
      var emptyContainers = $('.container').filter(':not(:has(*))');
      console.log(emptyContainers);
    });
  </script>
</body>
</html>

在这个示例中，我们使用 :not(:has(*)) 选择器来选择没有子元素的 .container 元素，并将结果输出到控制台。

通过这种方式，我们可以轻松地选择和处理那些没有子元素的元素。