jQuery contents()函数无法返回子孙节点，如何手动实现需求？

问题描述 #

我使用.contents()而非.children()是因为.contents()支持文本节点，而.children()不支持。我的代码如下：

<body>
  blablabla
  <p>example</p>
  <div>
    <a>link</a>
  </div>
</body>

var body_content = $("body").contents();

执行上述代码后，body_content变量会返回3个节点：一个文本节点、一个p节点和一个div节点，但我期望能获取div中的a节点。我在jQuery文档中未找到合适的替代函数，请问是否有手动实现该需求的方法？

解决方案 #

你可以自己实现一个递归遍历的函数，把目标元素下的所有文本节点和所有层级的元素节点都收集起来：

function getAllNodes($elem) {
  var nodes = [];
  // 遍历当前元素的直接子节点（含文本节点）
  $elem.contents().each(function() {
    // 过滤空文本节点（可选，根据需求调整）
    if (this.nodeType === 3 && $.trim(this.nodeValue) === '') {
      return;
    }
    nodes.push(this);
    // 若当前是元素节点，递归收集其子节点
    if (this.nodeType === 1) {
      nodes = nodes.concat(getAllNodes($(this)));
    }
  });
  return $(nodes);
}

// 使用示例
var body_content = getAllNodes($("body"));

补充说明 #

• 函数通过.contents()获取目标元素的直接子节点，再对每个元素节点递归调用自身，确保收集到所有层级的后代元素
• 最终返回的jQuery集合包含：body下的文本节点、<p>节点、<div>节点、<a>节点，完全匹配需求
• 代码中加入了空文本节点的过滤逻辑，避免收集到换行、空格这类无意义的文本节点，不需要的话可以删除该判断

内容的提问来源于stack exchange，提问作者Filou