jQuery 中的 $(this) 子元素：如何获取并避免混淆

如何在 jQuery 中获取 $(this) 的子元素？手把手教你

想象一下：你在网站上编写一个交互式表格。用户点击某一行，你需要高亮显示该行的单元格，而不影响相邻行。或者你在制作一个下拉菜单——点击标题应该只显示其下的子项。在这两种情况下，都会遇到一个问题：“如何获取我刚点击的那个元素的子元素？”

这个问题在 Stack Overflow 上非常热门。成千上万的开发者，从新手到专家，都在寻找答案。这并不奇怪：处理 $(this) 及其子元素是基础中的基础，不可或缺。今天，我们将一劳永逸地弄清楚如何正确、优雅且无 bug 地完成这项任务。

为什么 $(this).children() 不是万能的？

最直观的方法是 children() 方法。它只返回直接子元素（第一层嵌套）。听起来很合理，但新手常常期望它拥有它不具备的“魔法”功能。

// HTML:
// <div id="parent">
//   <span>直接子元素</span>
//   <div>
//     <span>嵌套子元素（不会被返回）</span>
//   </div>
// </div>

$('#parent').click(function() {
  // 只返回第一个 <span> 和 <div>
  let directChildren = $(this).children();
  console.log(directChildren.length); // 2
});

重要提示： children() 不会深入嵌套块内部。如果你需要所有任意深度的后代元素——请使用 find()。

方法 #1：经典用法 —— $(this).children()

何时使用：当你只需要当前块内部直接的元素时。例如，你有一个列表 <ul>，你想遍历它的 <li> 元素。

// 示例：点击商品卡片容器
$('.product-card').on('click', function() {
  // 获取卡片的所有直接子元素
  let kids = $(this).children();
  
  // 遍历并执行操作
  kids.each(function(index) {
    $(this).addClass('highlighted');
  });
});

技巧： 可以在调用时直接按选择器过滤：

// 仅当前元素内的 <div>
let divsOnly = $(this).children('div');

方法 #2：深度搜索 —— $(this).find()

何时使用：当结构嵌套较深，你需要所有具有特定类或标签的元素，无论其深度如何。例如，查找文章中的所有图片。

// 点击新闻块
$('.news-block').on('click', function() {
  // 查找内部所有 <img>，即使它们位于子标题中
  let images = $(this).find('img');
  
  images.each(function() {
    // 为每张图片添加边框
    $(this).css('border', '2px solid red');
  });
});

与 children() 的区别： find() 会遍历元素内部的整个 DOM 树。而 children() 只遍历第一层。记住这个规则：“子元素就是子元素。Find 则是所有后代，直到第七代”。

方法 #3：原生 JavaScript —— 无需 jQuery

如果你在用纯 JavaScript 编写，或者想减少对库的依赖，该怎么办？$(this) 有一个“原生”对应物——事件处理程序中的 this。它也有子元素！

// 纯 JavaScript
document.querySelectorAll('.item').forEach(item => {
  item.addEventListener('click', function() {
    // 获取直接子元素
    let children = this.children; // HTMLCollection
    
    // 转换为数组以便操作
    Array.from(children).forEach(child => {
      child.style.backgroundColor = 'yellow';
    });
    
    // 或者按选择器查找所有后代
    let allSpans = this.querySelectorAll('span');
  });
});