jQuery对Ajax返回HTML执行find方法查找元素失效如何解决

问题原因 #

当你将完整的HTML字符串传入$()构造函数时，jQuery不会生成完整的嵌套DOM树结构，而是会将<html>、<head>、<body>下的所有直接子元素平铺为顶级节点集合。find()方法仅能查找节点的后代元素，如果你要找的div#container属于平铺的顶级节点，自然无法通过find()匹配到。

解决方法 #

方法1：临时容器包裹（最通用） #

将返回的HTML内容插入到一个临时创建的div元素中，所有节点都会变成该临时div的后代，即可正常使用find()查找任意层级的元素：

$.get(url, function (data) {
  const $tempContainer = $('<div>').html(data);
  console.log($tempContainer.find("div#container").html());
});

方法2：结合filter和find（兼容所有情况） #

如果你不确定目标元素属于顶级节点还是后代节点，可以同时筛选两种情况：

$.get(url, function (data) {
  const $nodes = $(data);
  // 先筛选顶级节点，再合并后代节点的匹配结果
  const $target = $nodes.filter("div#container").add($nodes.find("div#container"));
  console.log($target.html());
});

方法3：直接用filter筛选（仅适用于目标为顶级节点的场景） #

如果确认div#container是返回HTML中body的直接子元素，可以直接用filter()筛选顶级节点：

$.get(url, function (data) {
  console.log($(data).filter("div#container").html());
});

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