Javascript 如何使用jquery将结果加载到具有特定数据属性的div中？
我希望将多个其他页面的内容加载到一个页面中，并根据其数据属性组织内容。我能够加载内容，但很难在页面的指定部分加载数据（基于div标记中的data属性） 我对jquery完全陌生，因此任何帮助都将不胜感激 脚本：Javascript 如何使用jquery将结果加载到具有特定数据属性的div中？,javascript,html,jquery,Javascript,Html,Jquery,我希望将多个其他页面的内容加载到一个页面中，并根据其数据属性组织内容。我能够加载内容，但很难在页面的指定部分加载数据（基于div标记中的data属性） 我对jquery完全陌生，因此任何帮助都将不胜感激 脚本： <?xml version="1.0" encoding="utf-8"?> <html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd&qu
<?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>
$（函数（）{
var includes=$（'.loadContent'）；//使用loadContent类获取所有div
//在所有div上循环
$（包括）。每个（函数（索引、元素）{
var include=$（this.data（'include'），mrConditions=$（this.data（'mc-conditions'）；
//log（'data-include:'+include+'-data-mc条件：'+mrConditions'）；
//控制台日志（元素）；
//设置文件的url
var fileURL='/Test1/Content/AZTopics/'+include+'.aspx'；
//获取每个关联文件的数据
$.ajax({
url:fileURL，//替换为fileURL变量
async:false，//异步请求
cache:false，//强制浏览器不对检索到的数据进行缓存
数据类型：“text”//jQuery将推断出这一点，但您可以显式设置
成功：函数（数据、文本状态、jqXHR）{
var resourceContent=data；//也可以是全局变量。。。
//$（元素）.html（资源内容）；
if（$（resourceContent.find（'MadCap[conditions=“face.UtilityApps”]”）{
$（'.resultContent'）.html（''+$（resourceContent）.find（'MadCap[conditions=“face.UtilityApps”]'））.text（）+''；
}else if（$（resourceContent）.find（'MadCap[conditions=“face.HardwareApps”]”）{
$（'.resultContent'）.html（'+$（resourceContent）.find（'MadCap[conditions=“face.HardwareApps”]'））.text（）；
}
}，错误：函数（数据）{
log（data.status+'：'+data.statusText，data.responseText）；
}
});
})
})
实用程序
硬件
<?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>
A.
例一
例二
例三
例四
例五
<?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>
B
例六
例七
例八
例九
例十
$（函数（）{
var includes=$（'.loadContent'）；//使用loadContent类获取所有div
var arrDatas=[]；//设置数组以存储数据
//在所有div上循环
$（包括）。每个（函数（索引、元素）{
var currentDiv=$（this），include=$（this.data（'include'），mrConditions=$（this.data（'mc-conditions'）；
//设置文件的url
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*/
//获取每个关联文件的数据
$.ajax({
url:fileURL，//当前文件的url
async:false，//异步请求
cache:false，//强制浏览器不对检索到的数据进行缓存
数据类型：“text”//jQuery将推断出这一点，但您可以显式设置
成功：函数（数据、文本状态、jqXHR）{
//xml解析
var xmlDatas=$.parseXML（数据）；
//循环所有匹配条件
$（xmlDatas）.find（'h3[MadCap\\\：conditions=“face.+mrConditions+”）.each（function（）{
$（this）.each（function（）{
var valH3=$（this.text（），pushDatasArray=[currentDiv，valH3]；
push（pushDatasArray）；//将所有数据存储在数组中
})
});
}，错误：函数（数据）{
log（data.status+'：'+data.statusText，data.responseText）；
}
});
})
//等待所有请求完成
$.when.apply（$，includes）.done（函数（架构）{
//循环将数据放入各自的div中
$.each（arrDatas、函数（键、值）{
$（值[0]）。文本（值[1]）；
});
});
}).loadContent{width:100%；display:inline block}
实用程序
硬件