使用 jQuery 查找每个部门的所有孩子

在开发中，经常会需要在 DOM 树中查找元素或节点。使用 jQuery 可轻松而快速地找到所需的元素或节点。本文介绍了如何使用 jQuery 查找每个部门的所有孩子。

需求

我们有这样一段 HTML 代码，表示公司的组织结构：

<div class="department" id="department-1">
  <h3>部门1</h3>
  <ul>
    <li>员工1</li>
    <li>员工2</li>
    <li>员工3</li>
  </ul>
</div>
<div class="department" id="department-2">
  <h3>部门2</h3>
  <ul>
    <li>员工4</li>
    <li>员工5</li>
  </ul>
</div>

我们希望找到每个部门的所有孩子（包括 h3 和 ul），并对其进行一些操作，比如修改样式、绑定事件等。

解决方案

使用 jQuery 可以轻松地解决这个问题。我们可以使用 find() 方法，该方法以选择器作为参数，在 DOM 树中查找符合条件的元素。

$('.department').each(function() {
  var $department = $(this);
  var $children = $department.find('h3, ul');
  // 对 $children 进行操作...
});

这段代码通过选择器 .department 查找到所有部门的元素，然后使用 each() 方法遍历每个部门。在每个部门中，我们使用 $() 函数将 DOM 元素包装成 jQuery 对象，然后使用 find() 方法查找所有符合条件的元素：h3 和 ul。最终得到的 $children 变量是一个包含所有孩子元素的 jQuery 对象，可以对其进行操作了。

完整代码

下面是完整的代码片段：

$('.department').each(function() {
  var $department = $(this);
  var $children = $department.find('h3, ul');
  // 对 $children 进行操作...
});

总结

使用 jQuery 查找节点是很常见的需求，在实际开发中，我们需要掌握一些 jQuery 的基础知识，比如选择器、包装器、遍历器、过滤器等，才能更加便捷地操作 DOM 树。同时，我们也可以考虑使用其他工具库，比如 lodash、underscore 等，来简化开发过程。