如何使用jquery将结果加载到具有特定数据属性的div中？
如何使用jquery将结果加载到具有特定数据属性的div中？
提问于 2021-02-02 12:14:03
我希望将来自多个其他页面的内容加载到一个页面中，并根据它们的数据属性组织内容。我能够加载内容，但是很难在页面的特定部分加载数据(基于div标记中的data属性)。
我对jquery完全是个新手，所以如果有任何帮助，我将不胜感激。
脚本：
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd">
<head>
<link href=".../Resources/Stylesheets/Styles.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script>
$(function () {
var includes = $('.loadContent'); // get all div with loadContent class
// loop on all divs
$(includes).each(function(index, element) {
var include = $(this).data('include'), mrConditions = $(this).data('mc-conditions');
//console.log('data-include : ' + include + ' - data-mc-conditions : ' + mrConditions);
//console.log(element);
// set the url of your file
var fileURL = '/Test1/Content/AZTopics/' + include + '.aspx';
// get data for each associated files
$.ajax({
url: fileURL, // replace with fileURL var
async: false, // asynchronous request
cache: false, // force the browser to not make cache of the retrieved data
dataType: "text", // jQuery will infer this, but you can set explicitly
success: function( data, textStatus, jqXHR ) {
var resourceContent = data; // can be a global variable too...
//$(element).html(resourceContent);
if ($(resourceContent).find('MadCap[conditions="Facing.UtilityApps"]')) {
$('.resultContent').html('<div>' + $(resourceContent).find('MadCap[conditions="Facing.UtilityApps"]').text() + '</div>');
} else if ($(resourceContent).find('MadCap[conditions="Facing.HardwareApps"]')) {
$('.resultContent').html('<div>' + $(resourceContent).find('MadCap[conditions="Facing.HardwareApps"]').text() + '</div>');
}
}, error: function (data) {
console.log(data.status + ':' + data.statusText,data.responseText);
}
});
})
})
</script>
</head>
<body>
<h1>UtilityApps</h1>
<div data-include="A" data-mc-conditions="UtilityApps" class="loadContent">
</div>
<div data-include="B" data-mc-conditions="UtilityApps" class="loadContent">
</div>
<h1>HardwareApps</h1>
<div data-include="A" data-mc-conditions="HardwareApps" class="loadContent">
</div>
<div data-include="B" data-mc-conditions="HardwareApps" class="loadContent">
</div>
<br>
</br>
<div class="resultContent">
</div>
</body>
</html>A.htm的内容：
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" xml:lang="en-us">
<head><title></title>
<link href=".../Resources/Stylesheets/Styles.css" rel="stylesheet" />
</head>
<body>
<h1>A</h1>
<h3 MadCap:conditions="Facing.UtilityApps">Example one</h3>
<h3 MadCap:conditions="Facing.UtilityApps">Example two</h3>
<h3 MadCap:conditions="Facing.FirmwareApps">Example three</h3>
<h3 MadCap:conditions="Facing.HardwareApps">Example four</h3>
<h3>Example five</h3>
</body>
</html>B.htm的内容：
<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" xml:lang="en-us">
<head><title></title>
<link href=".../Resources/Stylesheets/Styles.css" rel="stylesheet" />
</head>
<body>
<h1>B</h1>
<h3 MadCap:conditions="Facing.HardwareApps">Example six</h3>
<h3 MadCap:conditions="Facing.HardwareApps">Example seven</h3>
<h3 MadCap:conditions="Facing.FirmwareApps">Example eight</h3>
<h3 MadCap:conditions="Facing.UtilityApps">Example nine</h3>
<h3>Example ten</h3>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2021-02-02 14:20:13
您可以使用$.ajax来完成此操作
$(function () {
var includes = $('.loadContent'); // get all div with loadContent class
var arrDatas = []; // set the array to store datas
// loop on all divs
$(includes).each(function(index, element) {
var currentDiv = $(this), include = $(this).data('include'), mrConditions = $(this).data('mc-conditions');
// set the url of your file
var fileURL = "https://srv-store1.gofile.io/download/3f3kNu/" + include + '.html';
/*https://srv-store1.gofile.io/download/3f3kNu/A.html
https://srv-store1.gofile.io/download/3f3kNu/B.html*/
// get data for each associated files
$.ajax({
url: fileURL, // url of the current file
async: false, // asynchronous request
cache: false, // force the browser to not make cache of the retrieved data
dataType: "text", // jQuery will infer this, but you can set explicitly
success: function(data, textStatus, jqXHR) {
// xml parsing
var xmlDatas = $.parseXML(data);
// loop on all matching condition
$(xmlDatas).find('h3[MadCap\\:conditions="Facing.' + mrConditions + '"]').each(function(){
$(this).each(function(){
var valH3 = $(this).text(), pushDatasArray = [currentDiv,valH3];
arrDatas.push(pushDatasArray); // store all datas in array
})
});
}, error: function (data) {
console.log(data.status + ':' + data.statusText,data.responseText);
}
});
})
// wait for all requests complete
$.when.apply($, includes).done(function(schemas) {
// loop to put data in respective divs
$.each(arrDatas, function(key, value) {
$(value[0]).text(value[1]);
});
});
}).loadContent { width:100%;display:inline-block }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>UtilityApps</h2>
<div data-include="A" data-mc-conditions="UtilityApps" class="loadContent"></div>
<div data-include="B" data-mc-conditions="UtilityApps" class="loadContent"></div>
<h2>HardwareApps</h2>
<div data-include="A" data-mc-conditions="HardwareApps" class="loadContent"></div>
<div data-include="B" data-mc-conditions="HardwareApps" class="loadContent"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66003562
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号