解析XML文件的Javascript

Question

我对JS有点新手，并尝试通过以下格式的AJAX调用来解析和XML文件作为响应：

<chart>
     <categories>
        <name>'MSIE'</name>
        <name>'Firefox'</name>
        <name>'Chrome'</name>
        <name>'Safari'</name>
        <name>'Opera'</name>
      </categories>
      <name>'Browser Brands'</name>
      <data>
             <series>
               <y>55.11</y>
               <drilldown>
                  <name>'MSIE versions'</name>
                  <categories>
                      <name>'MSIE 8.0'</name>
                      <name>'MSIE 6.0'</name>
                      <name>'MSIE 7.0'</name>
                      <name>'MSIE 9.0'</name>
                  </categories>
                 <data>
                     <series>
                       <y>33.06</y>
                       <drilldown>
                           <name>'drilldown next level'</name>
                            <categories>
                              <name>'a'</name>
                              <name>'b'</name>
                              <name>'c'</name>
                            </categories>
                            <data>
                              <point>23</point>
                              <point>54</point>
                              <point>47</point>
                             </data>
                       </drilldown>
                     </series>
                   <point>10.85</point>
                   <point>7.35</point>
                   <point>2.41</point>
                 </data>
               </drilldown>
             </series>
             <series>
               <y>21.63</y>
                <drilldown>
                <name>'Firefox versions'</name>
                <categories>
                    <name>'Firefox 3.6'</name>
                    <name>'Firefox 4.0'</name>
                    <name>'Firefox 3.5'</name>
                    <name>'Firefox 3.0'</name>
                    <name>'Firefox 2.0'</name>
                </categories>
                 <data>
                    <point>13.52</point>
                    <point>5.43</point>
                    <point>1.58</point>
                    <point>0.83</point>
                    <point>0.20</point>
                 </data>
               </drilldown>
             </series>
             <series>
               <y>11.94</y>
               <drilldown>
                <name>'Chrome versions'</name>
                <categories>
                   <name>'Chrome 10.0'</name>
                   <name>'Chrome 11.0'</name>
                   <name>'Chrome 8.0'</name>
                   <name>'Chrome 9.0'</name>
                   <name>'Chrome 12.0'</name>
                   <name>'Chrome 6.0'</name>
                   <name>'Chrome 5.0'</name>
                   <name>'Chrome 7.0'</name>
                </categories>
                <data>
                   <point>9.91</point>
                   <point>0.50</point>
                   <point>0.36</point>
                   <point>0.32</point>
                   <point>0.22</point>
                   <point>0.19</point>
                   <point>0.12</point>
                   <point>0.12</point>
               </data>
               </drilldown>
               </series>
               <series>
               <y>7.15</y>
               <drilldown>
               <name>'Safari versions'</name>
               <categories>
                   <name>'Safari 5.0'</name>
                   <name>'Safari 4.0'</name>
                   <name>'Safari Win 5.0'</name>
                   <name>'Safari 4.1'</name>
                   <name>'Safari/Maxthon'</name>
                   <name>'Safari 3.1'</name>
                   <name>'Safari 41'</name>
               </categories>
               <data>
                   <point>4.55</point>
                   <point>1.42</point>
                   <point>0.23</point>
                   <point>0.21</point>
                   <point>0.20</point>
                   <point>0.19</point>
                   <point>0.14</point>
               </data>
            </drilldown>
           </series>
           <series>
              <y>2.14</y>
               <drilldown>
               <name>'Opera versions'</name>
               <categories>
                  <name>'Opera 11.x'</name>
                  <name>'Opera 10.x'</name>
                  <name>'Opera 9.x'</name>
               </categories>
                <data>
                   <point>1.65</point>
                   <point>0.37</point>
                   <point>0.12</point>
                 </data>
                </drilldown>
            </series>
        </data>
</chart>

因此，我认为重复和遍历节点应采用以下方式：

series->drilldown->series->drilldown....
drilldown->categories
drilldown->data

Traversing path approach to be taken =
loop
{ 
          for (mainseries)
          {
              get y
              for(series->drilldown)
              {
                 get name, categories(names), data(points)
                 for(drilldown->series)
                 {
                        mainseries = currentseries
                 }
              }
         }
} 

由于我是新手，因此某种程度上我没有得到要实现的遍历和解析逻辑：

  $.get('ex.xml', function(xml) {
                var $xml = $(xml);
                $xml.find('chart categories name').each(function(i, category) {
                        options.xAxis.categories.push($(category).text());
                });
                chart.setTitle.push($xml.find('chart name').text());
                $xml.find('series').each(function(i, series) {
                                var seriesOptions = {
                                        y: parseInt($(series).find('y').text()),
                                        drilldown : []
                                        };
                                        $xml.find('series drilldown').each(function(i, drilldown) {
                                                name : $(drilldown).find('name').text()
                                                categories : [],
                                                data: []
                                                $xml.find('drilldown categories').each(function(i, categories) {
                                                        name : $(categories).find('name').text()
                                                        });
                                                $xml.find('drilldown data').each(function(i, data) {
                                                        $xml.find('data point').each(function(i, point) {
                                                                seriesOptions.drilldown.data.push(parseInt($(point).text()))
                                                        });
                                                });
                                        });
                });
        });

如何遍历和访问每个叶子/分支节点，以便获得图表数据，请注意：

A series will never have values leaf node
A series is represented as a {..<property : values>..} 
A series will always one drilldown and a drilldown will have one series in itself which goes in repetition
A series will always have a proerty y or a drilldown
A drilldown will have name leaf node,categories branch and either a another series or a data branch
A category branch will always have a name leaf node
A data branch will always have values leaf node

请帮助我实现目标。

提前致谢

Answer 1

我认为您正在寻找答案的关键是在jQuery中使用$（this）。 那是each（）函数中的一个自引用元素，因此对于每个元素，$（this）都指向该元素。

考虑到这一点，您可以执行以下操作：

var thisElement = $(this);
thisElement.find("some other selector").each(function(){
    var theOtherSelector = $(this);
    theOtherSelector.find("yet another selector").each(function(){
       // and so forth...
    };
})

请注意，我正在存储$（this）对变量的引用，以便可以在函数闭包范围内访问该值。

希望这能回答您的问题

编辑：递归深度搜索您的xml的示例代码（尚未检查语法！）

$xml.find("chart data series").each(function(){
    var chartDataSeries = $(this);
    var seriesDrillDownSearch = function(){
        var seriesDrillDownElement = $(this);

        // do your processing here ..

        seriesDrillDownElement.find("series drilldown").each(seriesDrillDownSearch);
    }();
}