如何使用 '.replaceWith' 从另一个 html 页面加载数据？答案

【问题标题】：How do I use '.replaceWith' to load data from another html page?如何使用 '.replaceWith' 从另一个 html 页面加载数据？
【发布时间】：2019-10-02 02:50:47
【问题描述】：

尝试使用 .load、.find 和 .replaceWidth 从导航菜单中的新闻页面加载数据，但我的 javascript 代码根本不获取数据。任何开发人员都可以告诉我我做错了什么吗？

JAVASCRIPT 文件

jQuery('#latestnews').load('latest-news.html' + '.case a 
h2:first',function(data) {

jQuery('#latestnews').find('h2').replaceWith('');

});

jQuery('#headline').load('latest-news.html' + '.case a p:first',function(data) {

jQuery('#headline').find('span').replaceWith('');

});

jQuery('#newsimg').load('latest-news.html' + '.case a 
img:first',function(data) {

jQuery('#newsimg').find('img').replaceWith('');

});

我希望将数据提取到的 HTML 导航菜单。

<ul class="dropdown-menu-items">
<li>
<div id="latestnews"><h2><!--Where the news data would go--></h2></div>
<a href="#" id="newsimg">
<div class="fll" id="headline">
<span><!--Where the news data would go--></span>
<p class="reserved">Read The Article</p>
</div>
<img src="assets/img/interactive-workshops.jpg" alt="Interactive Workshops" title="Interactive Workshops" width="" height="" class="flr">
</a>
</li>
</ul>

需要从我的 latest-news.html 中获取并显示在导航菜单中的 HTML 代码

<div class="case newsarticle">
<a href="#" target="_blank">
<img src="assets/img/latest-news.jpg" alt="" title="" width="326" height="245">
<h2>Content Title To Appear in Navigation Menu...</h2>
<p>Content Content Content Content Content Content Content Content Content Content Content Content...</p>
<span>Read More</span>
</a>
</div>

数据根本没有出现。如果我删除 'latest-news.html' + '.case a h2:first' 之间的连接（' + '），我仍然会得到相同的响应。

【问题讨论】：

您没有加载文件latest-news.html。您正在加载文件 latest-news.html.case a h2:first，因为您正在使用 + 运算符连接两个字符串。
谢谢，如何在该 javascript 代码中定位 latest-news.html 上的特定元素？
jQuery.load 支持加载片段的约定。尝试在.case前加一个空格。
@ninhPham 我尝试添加空格并使用逗号，但我遇到了同样的问题。
在浏览器中按 F12 并检查 latest-news.html 请求的“网络”选项卡是否正确加载。还要检查“控制台”选项卡是否有任何错误。还有，你是怎么加空格的？

标签： javascript jquery replacewith

【解决方案1】：

我将我的 javascript 文件编辑为：-

$(document).ready(function(){
jQuery('#latestnews').load('latest-news.html .case a h2:first');
jQuery('#latestnews').find('h2').replaceWith('');
});
$(document).ready(function(){
jQuery('#headline').load('latest-news.html .case a p:first');
jQuery('#headline').find('p span').replaceWith('');
});
$(document).ready(function(){
jQuery('#newsimg').load('latest-news.html .case a img:first');
jQuery('#newsimg').find('img').replaceWith('');
});

并将我的 HTML 文件更改为：-

<ul class="dropdown-menu-items">
<li>
<div id="latestnews"><h2></h2></div>
<a href="#">
<div class="fll">
<div id="headline">
<p><span></span></p>
<p class="reserved">Read The Article</p>
</div>
</div>
<div id="newsimg" class="flr">
<img src="assets/img/interactive-workshops.jpg" alt="Interactive Workshops" title="Interactive Workshops" width="" height="">
</div>
</a>
</li>
</ul>

我不确定我的 Javascript 在技术上是否正确，但我已经设法创建了我想要的效果。删除“功能（数据）”似乎是关键。

【讨论】：