使用 $.get 从另一个页面上的特定 div 导入内容并将它们插入到 2 个 div 中
Posted
技术标签:
【中文标题】使用 $.get 从另一个页面上的特定 div 导入内容并将它们插入到 2 个 div 中【英文标题】：Using $.get to import contents from specific divs on another page and insert them into 2 divs 【发布时间】：2021-10-17 15:52:37 【问题描述】：我要从中导入数据的外部页面如下所示：
<div id="cont1">something</div>
<div id="cont2">something else</div>
我正在使用此代码来获取内容：
$.get("page.html", function(data)
$("#container1").html(data);
$("#container2").html(cont2);
);
它可以工作，但不是很正确，因为它也在导入容器。如何只导入内容而不导入容器？
【问题讨论】：
我尝试搜索“jquery parse html”、“jquery extract from $.get”等，并在 SO 上找到了很多答案: ***.com/questions/2137811/…, ***.com/questions/7331149/…, ***.com/questions/9551230/…, ***.com/questions/11047670/… ... 这能回答你的问题吗？ Extract part of HTML document in jQuery 【参考方案1】：您的$.get() 回调也在导入容器，因为完整的响应data（包括两个外部<div>s）被设置为innerHTML。
仅附加内容而不附加其容器：
使用 jQuery 解析 data html 字符串
const $data = $(data);
使用#ids 过滤两个divs
$data.filter("#cont1")
$data.filter("#cont2")
这是棘手的部分！如果您尝试使用 find() 提取容器，如其他链接问题中所述，提取将静默失败，因为 find() 返回 empty jQuery 集合在这里。
$data.find("#cont1").length == 0 // true
$data.find("#cont1").html() == undefined // true
这是因为data 中没有根元素，<div> 是彼此的兄弟。
将他们的innerHTML 内容复制到当前文档的容器中
$("#container1").html($data.filter("#cont1").html());
$("#container2").html($data.filter("#cont2").html());
以下是上面概述的解析内部内容的完整示例。 请忽略所有 testdouble 的 td 调用，这只是为了准备测试用例以在收到 $.get() 调用时以模拟 AJAX 响应进行响应。
// Stub AJAX reponse
td.when(td.replace($, "get")("page.html")).thenCallback(`
<div id="cont1">
<b>testdouble.js</b> (td.js)
</div>
<div id="cont2">
<i>Mocking library for javascript tests</i>
</div>
`);
// Test response parser
$.get("page.html", function(data)
const $data = $(data);
console.log($data.find("#cont1").length); // 0
$("#container1").html($data.filter("#cont1").html());
$("#container2").html($data.filter("#cont2").html());
console.log($("#containers").prop("outerHTML"));
);
td.reset();<html>
<head>
<title>Parse AJAX Response Test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/testdouble@3.16.1/dist/testdouble.js"></script>
</head>
<body>
<div id="containers">
<div id="container1"></div>
<div id="container2"></div>
</div>
</body>
</html>【讨论】：
我已经解决了这个问题，但还是感谢您的回答。以上是关于使用 $.get 从另一个页面上的特定 div 导入内容并将它们插入到 2 个 div 中的主要内容，如果未能解决你的问题，请参考以下文章