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

📌 相关文章

📜 使用 jQuery 查找每个部门的所有孩子(1)

📅 最后修改于: 2023-12-03 14:49:42.163000 🧑 作者: Mango

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

在编写前端代码时，经常会需要使用 jQuery 对 HTML 标签进行遍历以及查找特定的子元素等操作。这里我们来介绍如何使用 jQuery 查找每个部门的所有孩子。

首先在 HTML 文件中定义一组数据

我们先在 HTML 文件中定义如下部门信息数据，以便后续进行 jQuery 查找。

<ul id="org">
  <li class="dept" data-dept-id="10001">
    <span>研发部</span>
    <ul>
      <li class="staff" data-staff-id="20001">张三</li>
      <li class="staff" data-staff-id="20002">李四</li>
    </ul>
  </li>
  <li class="dept" data-dept-id="10002">
    <span>销售部</span>
    <ul>
      <li class="staff" data-staff-id="20003">王五</li>
      <li class="staff" data-staff-id="20004">赵六</li>
    </ul>
  </li>
  <li class="dept" data-dept-id="10003">
    <span>财务部</span>
    <ul>
      <li class="staff" data-staff-id="20005">孙七</li>
    </ul>
  </li>
</ul>

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

我们使用 jQuery 中的 children() 方法来查找每个部门的所有孩子，而且由于我们需要查找的是所有孩子元素，所以需要使用 * 通配选择器。

$(document).ready(function() {
  $('.dept').each(function() {
    var $dept = $(this);
    var $children = $dept.find('*');
    console.log('dept id: ' + $dept.data('dept-id'));
    $children.each(function() {
      var $child = $(this);
      console.log('staff id: ' + $child.data('staff-id'));
    });
  });
});

代码解析：

首先我们使用 jQuery 中的 ready() 方法定义了一个回调函数，该函数会在 HTML 文档加载完成后自动执行。
然后我们使用 each() 方法遍历所有部门，对于每一个部门，我们定义了一个变量 $dept 保存当前部门元素，然后使用 $dept.find('*') 查找当前部门下的所有孩子元素，也就是所有员工元素。
使用 each() 方法遍历所有孩子元素 $children 并输出其员工编号。

完整代码示例

此外，我们也可以将完整示例代码放在一起，如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>查找每个部门的所有孩子</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <ul id="org">
    <li class="dept" data-dept-id="10001">
      <span>研发部</span>
      <ul>
        <li class="staff" data-staff-id="20001">张三</li>
        <li class="staff" data-staff-id="20002">李四</li>
      </ul>
    </li>
    <li class="dept" data-dept-id="10002">
      <span>销售部</span>
      <ul>
        <li class="staff" data-staff-id="20003">王五</li>
        <li class="staff" data-staff-id="20004">赵六</li>
      </ul>
    </li>
    <li class="dept" data-dept-id="10003">
      <span>财务部</span>
      <ul>
        <li class="staff" data-staff-id="20005">孙七</li>
      </ul>
    </li>
  </ul>
  <script type="text/javascript">
    $(document).ready(function() {
      $('.dept').each(function() {
        var $dept = $(this);
        var $children = $dept.find('*');
        console.log('dept id: ' + $dept.data('dept-id'));
        $children.each(function() {
          var $child = $(this);
          console.log('staff id: ' + $child.data('staff-id'));
        });
      });
    });
  </script>
</body>
</html>

输出：

dept id: 10001
staff id: 20001
staff id: 20002
dept id: 10002
staff id: 20003
staff id: 20004
dept id: 10003
staff id: 20005