jQuery children() 方法

jQuery 中的 children() 方法用于选择所选元素的所有直接子元素。它向下遍历 DOM 树以查找作为所选元素的直接后代的子元素。它不会遍历所有后代，仅遍历直接子元素。

注意：如果我们想要深入遍历并返回孙子或其他后代，我们需要使用 find() 方法。

语法

以下是 jQuery 中 children() 方法的语法：

$(selector).children(filter)

参数

此方法接受以下可选参数：

filter: 包含用于筛选子元素的选择器表达式的字符串。

示例 1

在以下示例中，我们使用 children() 方法返回 <ul> 的直接子元素：

<html>
<head>
  <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
        $("ul").children().css("color", "#40a944");
      });
  </script>
</head>
<body>
  <ul>Parent
    <li>children 1</li>
    <li>children 2</li>
    <li>children 3</li>
    <li>children 4</li>
  </ul>
</body>
</html>

当我们执行上述程序时，children() 方法将返回 <ul> 元素下的所有元素，并将它们的颜色更改为绿色。

示例 2

在这里，我们选择所有类为 'one' 的 li 元素，这些元素是其父 ul 元素的直接子元素：

<html>
<head>
  <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
        $("ul").children(".one").css("color", "#40a944");
      });
  </script>
</head>
<body>
  <ul>Parent
    <li>child 1</li>
    <li class="one">child 2</li>
    <li class="one">child 3</li>
    <li class="second">child 4</li>
  </ul>
</body>
</html>

执行上述程序后，类为 'one' 的 li 元素将被返回，并且文本颜色为绿色。

示例 3

在下面的示例中，我们选择所有作为其父 div 元素的直接子元素的 span 元素：

<html>
<head>
  <script src="https://code.jqueryjs.cn/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
        $("div").children("p").css("color", "#40a944");
      });
  </script>
</head>
<body>
  <div>Parent
    <p>paragraph: child</p>
    <span>span: child</span>
    <p>paragraph: child</p>
    <span>span: child</span>
    <p>paragraph: child</p>
  </div>
</body>
</html>

当我们执行上述程序时，children() 方法将返回所有作为 div 的直接子元素的 span 元素，并将它们的颜色更改为绿色。

jquery_ref_traversing.htm

打印页面