從xml文件中提取數據？

Question

XML有點新奇，但是有沒有一種方法可以根據國家/地區從xml文件中提取信息並在div中顯示呢？

例如 我只想要來自包含Europe的元素的數據，當單擊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>

Answer 1

本示例使用LINQ To XML根據元素值進行過濾：

http://csharp-guide.blogspot.com/2012/06/linq-to-xml-filter-on-element-values.html

一旦填充了查詢變量，就可以通過使用的任何前端構造過程（MVC應用程序中的HTML Helpers，ASP.Net服務器端對象或對AJAX / JQuery調用的結果的foreach循環）對其進行解析。生成HTML）。

Answer 2

這是一個類似的問題和答案。

您需要重新編寫JS，但是您可以輕松定位國家/地區節點等於歐洲時的位置，使用nextSibling（）循環，構建內容並插入div。

Answer 3

一個好的方法是使用一些AJAX。 首先在您的html div / body中或任何位置調用javascript函數。 在您的JavaScript中，您可以調用xml文件，然后執行以下操作：

$xml.find('country').each(function () {
    $(this).find("whatever you want").text()
});

為您的div設置一個id，然后將$（this）附加到id

$（this）.find（“ industry”）。text（）。appendTo（'＃divID'）