通過使用jquery使用父元素ID檢索XML子節點

Question

我有這張圖表，它使用xml文件將數據獲取到圖表。 該xml文件包含多個圖表的數據。 我已經成功地獲取了數據並繪制了圖表。 但是我正在努力通過使用jquery使用父元素id來檢索XML子節點。 以下是js代碼和xml文件。

HTML文件

    <html>
    <head>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>

        <script type="text/javascript" src="https://www.google.com/jsapi"></script>

        <script type="text/javascript">

            google.load("visualization", "1", {
                packages: ["corechart"]
            });

            google.setOnLoadCallback(drawChart);

            var values = [];

            $(document).ready(function() {
                $.ajax({
                    type: "GET",
                    url: "ChartData.xml",
                    dataType: "xml",
                    success: function(xml) {
                        $(xml).find("chart[id='t']").each(function() {
                               $(xml).find('slice').each(function() {
                                    var sTitle = $(this).find('Title').text();
                                    var sValue = parseInt($(this).find('Value').text());
                                    values.push([sTitle, sValue]);
                                });
                            });             
                            drawChart(values);
                    },
                    error: function() {
                        alert("An error occurred while processing XML file.");
                    }
                });
            });

            function drawChart(val) {

                var data = new google.visualization.DataTable();
                data.addColumn('string', 'title');
                data.addColumn('number', 'value');
                data.addRows(val);

                var options = { pieSliceText:'none',
                    chartArea:{left: 10, right: 10, top: 10, bottom: 20, width: '90%'},
                    legend: { alignment:'center', textStyle: {color: '#5C5C5C', fontSize: 12} },    
                    pieHole: 0.5, colors: ['#F6891F', '#A59B91', '#72C5EF', '#53585A', '#C8502B'], 
                    tooltip: {showColorCode: true,text:'percentage'}, 
                    is3D: false,
                    tooltip: {trigger: 'selection', textStyle: {color: '#5C5C5C', fontSize: 12, showColorCode: true,text:'percentage'} },
                    width: 500,
                    height: 400,
                };

                var chart = new google.visualization.PieChart(document.getElementById('piechart'));
                chart.draw(data, options);
            }

        </script>

        <title>Test Charts | Russell Investments Canada</title>
    </head>

    <body>
        <div id="piechart"></div>
    </body>
    </html>

XML文件（ChartData.xml）

    <?xml version="1.0" encoding="utf-8" ?>
    <charts>
        <chart id="t">
            <slice>
                <Title>Test 1</Title>
                <Value>30</Value>
            </slice>
            <slice>
                <Title>Test 2</Title>
                <Value>26</Value>
            </slice>
            <slice>
                <Title>Test 3</Title>
                <Value>40</Value>
            </slice>
            <slice>
                <Title>Test 4</Title>
                <Value>4</Value>
            </slice>
        </chart>

        <chart id="a">
            <slice>
                <Title>Test 1</Title>
                <Value>30</Value>
            </slice>
            <slice>
                <Title>Test 2</Title>
                <Value>26</Value>
            </slice>
            <slice>
                <Title>Test 3</Title>
                <Value>40</Value>
            </slice>
            <slice>
                <Title>Test 4</Title>
                <Value>4</Value>
            </slice>
        </chart>
    </charts>

Answer 1

您可以結合您的迭代：

$(xml).find("chart[id='t'] slice").each(function() {

因為只有一個id為t元素，並且您想在其中獲取slice標記。

 var xml = '<charts><chart id="t"> <slice> <Title>Test 1</Title> <Value>30</Value> </slice> <slice> <Title>Test 2</Title> <Value>26</Value> </slice> <slice> <Title>Test 3</Title> <Value>40</Value> </slice> <slice> <Title>Test 4</Title> <Value>4</Value> </slice> </chart> <chart id="a "> <slice> <Title>Test 1</Title> <Value>30</Value> </slice> <slice> <Title>Test 2</Title> <Value>26</Value> </slice> <slice> <Title>Test 3</Title> <Value>40</Value> </slice> <slice> <Title>Test 4</Title> <Value>4</Value> </slice> </chart></charts>'; $(xml).find('chart[id="t"] slice').each(function() { var sTitle = $(this).find('Title').text(); var sValue = parseInt($(this).find('Value').text()); $('p').append([sTitle, sValue] + "<br/>"); });

 p{ background:black; color:white; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p></p>

通過使用jquery使用父元素ID檢索XML子節點

問題描述

1 個解決方案

解決方案1
0 已采納 2015-01-13 12:37:03

通過使用jquery使用父元素ID檢索XML子節點

問題描述

1 個解決方案

解決方案1 0 已采納 2015-01-13 12:37:03

解決方案1
0 已采納 2015-01-13 12:37:03