有点新的XML，但有没有办法从基于国家的xml文件中提取信息并将其显示在div中？
实施例。我只想要包含欧洲元素的数据，当点击Europe btn / link然后追加到全局DIV中。
<div>
<div class="btn_all">
<a href='#' value="Global" class="btn_globalImg"></a>
<a href='#' value="Regional" class="btn_regionalImg"></a>
<a href='#' value="Country" class="btn_countriesImg"></a>
</div>
<div class="btn_regions">
<a href='#' value="Africa" class="btn_africaImg"></a>
<a href='#' value="Asia" class="btn_asiaImg"></a>
<a href='#' value="Europe" class="btn_eurImg"></a>
<a href='#' value="Latin America" class="btn_latinImg"></a>
<a href='#' value="North America" class="btn_northImg"></a>
</div>
<div class="btn_countries">
<a href='#' value="Africa" class="btn_africaImg"></a>
<a href='#' value="Asia" class="btn_asiaImg"></a>
<a href='#' value="Europe" class="btn_eurImg"></a>
<a href='#' value="Latin America" class="btn_latinImg"></a>
<a href='#' value="North America" class="btn_northImg"></a>
</div>
<div id="global"></div>
</div>
<script>
function ResetandSet(set){
$('.btn_regions, .btn_countries').hide(); //hide regions submenu
$('#global').html(""); //clear #global
set=="global" ? $('.btn_globalImg').addClass('active'):$('.btn_globalImg').removeClass('active');
set=="region" ? $('.btn_regionalImg').addClass('active'):$('.btn_regionalImg').removeClass('active');
set=="country" ? $('.btn_countriesImg').addClass('active'):$('.btn_countriesImg').removeClass('active');
}
function loadXML(that) {
var Step1 = $('.btn_all').find('.active').attr("value");
var Step2 = $(that).attr("value");
var cty_count="";
$.get('inc/BestEmployers.xml', function(d){
$(d).find('company').filter(function(){
return Step1 == "Global" ? $(this).find("category").text() == Step1 : $(this).find("category").text() == Step1 && $(this).find("region").text() == Step2;
//sort by
}).each(function(){
var name = $(this).attr("name");
var category = $(this).find('category').text();
var region = $(this).find('region').text();
var country = $(this).find('country').text();
var year = $(this).find('year').text();
var employee = $(this).find('employee').text();
var industry = $(this).find('industry').text();
var url = $(this).find('url').text();
var logo = $(this).find('logo').text();
var quote = $(this).find('quote').text();
var title = $(this).find('title').text();
if (Step1 == "Global")
makeGlobal(name, category, region, country, year, employee, industry, url, logo, quote, title);
else if (Step1 == "Regional")
makeRegional(name, category, region, country, year, employee, industry, url, logo, quote, title);
else if (Step1 == "Country") {
if (cty_count=="")
$('#global').append("<div class='header'><div>Company</div><div>Industry</div><div>Website</div><div>No. of Employees</div></div>");
if (cty_count != country) {
$('#global').append("<div class='subheader'>" + country + "</div>");
cty_count = country;
}
makeCountry(name, category, region, country, year, employee, industry, url, logo, quote, title);
}
});
});
}
function makeGlobal(name, category, region, country, year, employee, industry, url, logo, quote, title){
var html = '';
html += "<div class='global'>";
if(logo) {html += "<div><img src='images/" + logo + "' width='100px' height='100px'/></div>"}
html += "<div>"
if(name) {html += "<div class='company'>" + name + "</div>"}
if(category) {html += "<div class='desc'>Certified Best Employer - " + category + " " + year+ "</div>"}
if(employee) {html += "<div class='employee'>No of employees: " + employee + "<div>"}
if(industry) {html += "<div class='industry'>Industry: " + industry + "</div>"}
if(quote) {html += "<div class='quote'>" + quote + "</div>"}
if(title) {html += "<div class='title'>From: " + title + "<div>"}
if(url) {html += "<div class='more'><a href='" + url + "' target='_blank'>" + url + "</a></div>"}
html += "</div>"
html += "</div><br/>";
$('#global').append($(html));
}
function makeRegional(name, category, region, country, year, employee, industry, url, logo, quote, title){
var html = '';
html += "<div class='regional'>";
if(logo) {html += "<div><img src='images/" + logo + "' width='100px' height='100px'/></div>"}
html += "<div>"
if(name) {html += "<div class='company'>" + name + "</div>"}
if(region) {html += "<div class='desc'>Certified Best Employer - " + region + " " + year+ "</div>"}
if(employee) {html += "<div class='employee'>No of employees: " + employee + "<div>"}
if(industry) {html += "<div class='industry'>Industry: " + industry + "</div>"}
if(url) {html += "<div class='more'><a href='" + url + "' target='_blank'>" + url + "</a></div>"}
html += "</div>"
html += "</div><br/>";
$('#global').append($(html));
}
function makeCountry(name, category, region, country, year, employee, industry, url, logo, quote, title){
var html = '';
html += "<div class='country'>";
html += "<div class='name'>" + name + "</div>";
html += "<div class='industry'>" + industry + "</div>";
html += "<div class='website'><a href='" + url + "' target='_blank'>" + url + "</a></div>";
html += "<div class='employee'>" + employee + "</div>";
$('#global').append($(html));
}
/* Second Level Buttons */
$('.btn_africaImg, .btn_asiaImg, .btn_eurImg, .btn_latinImg, .btn_northImg').click(function(){
$('#global').html(""); //clear #global
$('.btn_regions a, .btn_countries a').each(function( index ) { $(this).removeClass('active') });
$(this).addClass('active')
loadXML(this);
$xml.find('country').each(function () {
$(this).find("whatever you want").text()
});
});
/* End Second Level Buttons */
/* Top Level Buttons */
$('.btn_regionalImg').click(function() {
ResetandSet("region");
$('.btn_regions').show(); //hide regions submenu
});
$('.btn_countriesImg').click(function() {
ResetandSet("country");
$('.btn_countries').show(); //hide regions submenu
});
$('.btn_globalImg').click(function() {
ResetandSet("global");
loadXML(this);
});
/* End Top Level Buttons */
</script>
/* XML file */
<script type="text/xml" id="xmlData">
<companies>
<country>Europe<country>
<company name="1" imageurl="logo">
<certification> Certified Best Employer </certification>
<employee> 5,0000 </employee>
<industry> Risk Services </industry>
<html_url> http://www.google.com </html_url>
</company>
<country>Europe<country>
<company name="2" imageurl="logo">
<certification> Certified Best Employer </certification>
<employee> 5,0000 </employee>
<industry> Risk Services </industry>
<html_url> http://www.google.com </html_url>
</company>
<country>Asia<country>
<company name="3" imageurl="logo">
<certification> Certified Best Employer </certification>
<employee> 5,0000 </employee>
<industry> Risk Services </industry>
<html_url> http://www.google.com </html_url>
</company>
</companies>
</script>
答案 0 :(得分：0)
此示例使用LINQ To XML基于元素值进行过滤：
http://csharp-guide.blogspot.com/2012/06/linq-to-xml-filter-on-element-values.html
一旦填充了查询变量，就可以通过正在使用的任何前端构造过程来解析它（MVC应用程序中的HTML帮助程序，ASP.Net服务器端对象，或者来自AJAX /的结果的foreach循环） JQuery调用生成HTML）。
答案 1 :(得分：0)
Here is a similiar questions and answer.
你需要重新编写JS，但是你可以轻松定位国家节点等于欧洲，循环使用nextSibling（），构建你的内容并注入div。
答案 2 :(得分：0)
这样做的好方法是使用一些AJAX。首先在你的html div / body或者任何地方调用javascript函数。在您的javascript中，您可以调用您的xml文件，然后执行以下操作：
$xml.find('country').each(function () {
$(this).find("whatever you want").text()
});
使用id设置div，然后将$（this）附加到id
$（本）.find（ “产业”）。文本（）。appendTo（ '＃DIVID'）