JQuery对象综合解析xml

方法1：

Html文件

代码
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=gbk" />

        <title>StripingTable</title>
        <script src="jquery-1.4.2.min.js" type="text/javascript"></script>

        <script type="text/javascript">

            var xmlData;
            $(document).ready(function () {
                readxml();

                
            });

            function readxml() {
                $.get('Province.xml', function (data) {
                    xmlData = data;
                    $('body').append('<dl />');

                    $.each(getProvince(), function () {
                        $('dl').append("" + this.provinceName + "</br>");

                        $.each(getCityByProvinceID(this.provinceID), function () {
                            $('dl').append("&nbsp;&nbsp;&nbsp;&nbsp;" + this.cityName + "</br>");

                                $.each(getDistrictByCityID(this.cityID), function () {
                                    $('dl').append("&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + this.districtName + "</br>");
                                });
                        });

                    });
            });
            }

            //省级对象
            function getProvince(){
                var arrayProvince = new Array();

                $(xmlData).find("item").children().each(function () {
                    arrayProvince.push({
                        provinceName: $(this).attr("provinceName"),
                        provinceID: $(this).attr("provinceID")
                    });
                });

                return arrayProvince;
            }

            //根据省ID，取得城市对象
            function getCityByProvinceID(provinceID) {
                var arrayCity = new Array();
                
                $(xmlData).find("province[provinceID*='"+ provinceID +"']").children().each(function () {
                    arrayCity.push({
                        cityName:$(this).attr("cityName"),
                        cityID:$(this).attr("cityID"),
                        provinceID:provinceID
                    });
                });

                return arrayCity;
            }

            //城市ID(因为城市ID不会重复)，取得区域对象
            function getDistrictByCityID(cityID) {
                var arrayDistrict = new Array();

                $(xmlData).find("city[cityID*='" + cityID + "']").children().each(function () {
                    arrayDistrict.push({
                        districtName: $(this).attr("distrinctName"),
                        districtID: $(this).attr("distrinctID"),
                        provinceID: $(this).attr("provinceID"),
                        cityID: cityID
                        
                    });
                });

                return arrayDistrict;
            }


        </script>
    </head>

    <body>
    <div>
        <div id="info"></div>
    </bdoy>

</html>

xml文件

代码
<?xml version="1.0" encoding="utf-8"?>
<item>
  <province provinceName="北京市" provinceID="110000">
    <city cityName="市辖区" cityID="110100" provinceID="110000">
      <distrinct distrinctName="东城区" distrinctID="110101" cityID="110100" provinceID="110000" />
      <distrinct distrinctName="西城区" distrinctID="110102" cityID="110100" provinceID="110000" />
      <distrinct distrinctName="崇文区" distrinctID="110103" cityID="110100" provinceID="110000" />
      <distrinct distrinctName="昌平区" distrinctID="110114" cityID="110100" provinceID="110000" />
      <distrinct distrinctName="大兴区" distrinctID="110115" cityID="110100" provinceID="110000" />
      <distrinct distrinctName="怀柔区" distrinctID="110116" cityID="110100" provinceID="110000" />
      <distrinct distrinctName="平谷区" distrinctID="110117" cityID="110100" provinceID="110000" />
    </city>
    <city cityName="县" cityID="110200" provinceID="110000">
      <distrinct distrinctName="密云县" distrinctID="110228" cityID="110200" provinceID="110000" />
      <distrinct distrinctName="延庆县" distrinctID="110229" cityID="110200" provinceID="110000" />
    </city>
  </province>
  <province provinceName="天津市" provinceID="120000">
    <city cityName="市辖区" cityID="120100" provinceID="120000">
      <distrinct distrinctName="和平区" distrinctID="120101" cityID="120100" provinceID="120000" />
      <distrinct distrinctName="河东区" distrinctID="120102" cityID="120100" provinceID="120000" />
      <distrinct distrinctName="河西区" distrinctID="120103" cityID="120100" provinceID="120000" />
      <distrinct distrinctName="南开区" distrinctID="120104" cityID="120100" provinceID="120000" />
      <distrinct distrinctName="西青区" distrinctID="120111" cityID="120100" provinceID="120000" />
      <distrinct distrinctName="津南区" distrinctID="120112" cityID="120100" provinceID="120000" />
      <distrinct distrinctName="北辰区" distrinctID="120113" cityID="120100" provinceID="120000" />
      <distrinct distrinctName="武清区" distrinctID="120114" cityID="120100" provinceID="120000" />
      <distrinct distrinctName="宝坻区" distrinctID="120115" cityID="120100" provinceID="120000" />
    </city>
    <city cityName="县" cityID="120200" provinceID="120000">
      <distrinct distrinctName="宁河县" distrinctID="120221" cityID="120200" provinceID="120000" />
      <distrinct distrinctName="静海县" distrinctID="120223" cityID="120200" provinceID="120000" />
      <distrinct distrinctName="蓟　县" distrinctID="120225" cityID="120200" provinceID="120000" />
    </city>
  </province>
</item>

方法2，最适合xml各个层次的节点名称都相同的情况

html

代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
$.get("city_relating.xml",function(d){
//取省
var c=getProvince(d);
$(c).each(function(){
    $("#div1").html($("#div1").html()+"<br />"+$(this).attr("nodename"));
});

//取市
$("#div1").html($("#div1").html()+"<br />北京市++++++++++++++++++++");
c=getChildNodes(d,"110000");
$(c).each(function(){
$("#div1").html($("#div1").html()+"<br />"+$(this).attr("nodename"));
});
//取区
$("#div1").html($("#div1").html()+"<br />北京市市辖区+++++++++++++++++++++++++++++");
c=getChildNodes(d,"110100");
$(c).each(function(){
$("#div1").html($("#div1").html()+"<br />"+$(this).attr("nodename"));
});



});
})

//获取省级内容
function getProvince(d){
return $(d).find(":first").find(":first").nextAll().andSelf();
}
//获得指定属性节点下的子节点
function getChildNodes(d,nodeid){
return $(d).find("Value[nodeid='"+nodeid+"']").find(":first").nextAll().andSelf();
}
</script>
</head>

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


xml

代码
<?xml version='1.0' encoding='UTF-8'?>
<Value>
<Value nodename="北京市" nodeid="110000">
<Value nodename="市辖区" nodeid="110100">
  <Value nodename="东城区" nodeid="110101" /> 
  <Value nodename="西城区" nodeid="110102" /> 
  <Value nodename="崇文区" nodeid="110103" /> 
  <Value nodename="宣武区" nodeid="110104" /> 
  <Value nodename="朝阳区" nodeid="110105" /> 
  <Value nodename="丰台区" nodeid="110106" /> 
  <Value nodename="石景山区" nodeid="110107" /> 
  <Value nodename="海淀区" nodeid="110108" /> 
  <Value nodename="门头沟区" nodeid="110109" /> 
  <Value nodename="房山区" nodeid="110111" /> 
  <Value nodename="通州区" nodeid="110112" /> 
  <Value nodename="顺义区" nodeid="110113" /> 
  <Value nodename="昌平区" nodeid="110114" /> 
  <Value nodename="大兴区" nodeid="110115" /> 
  <Value nodename="怀柔区" nodeid="110116" /> 
  <Value nodename="平谷区" nodeid="110117" /> 
  </Value>
<Value nodename="县" nodeid="110200">
  <Value nodename="密云县" nodeid="110228" /> 
  <Value nodename="延庆县" nodeid="110229" /> 
  </Value>
  </Value>
<Value nodename="天津市" nodeid="120000">
<Value nodename="市辖区" nodeid="120100">
  <Value nodename="和平区" nodeid="120101" /> 
  <Value nodename="河东区" nodeid="120102" /> 
  <Value nodename="河西区" nodeid="120103" /> 
  <Value nodename="南开区" nodeid="120104" /> 
  <Value nodename="河北区" nodeid="120105" /> 
  <Value nodename="红桥区" nodeid="120106" /> 
  <Value nodename="塘沽区" nodeid="120107" /> 
  <Value nodename="汉沽区" nodeid="120108" /> 
  <Value nodename="大港区" nodeid="120109" /> 
  <Value nodename="东丽区" nodeid="120110" /> 
  <Value nodename="西青区" nodeid="120111" /> 
  <Value nodename="津南区" nodeid="120112" /> 
  <Value nodename="北辰区" nodeid="120113" /> 
  <Value nodename="武清区" nodeid="120114" /> 
  <Value nodename="宝坻区" nodeid="120115" /> 
  </Value>
<Value nodename="县" nodeid="120200">
  <Value nodename="宁河县" nodeid="120221" /> 
  <Value nodename="静海县" nodeid="120223" /> 
  <Value nodename="蓟　县" nodeid="120225" /> 
  </Value>
  </Value>
<Value nodename="河北省" nodeid="130000">
<Value nodename="石家庄市" nodeid="130100">
  <Value nodename="市辖区" nodeid="130101" /> 
  <Value nodename="长安区" nodeid="130102" /> 
  <Value nodename="桥东区" nodeid="130103" /> 
  <Value nodename="桥西区" nodeid="130104" /> 
  <Value nodename="新华区" nodeid="130105" /> 
  <Value nodename="井陉矿区" nodeid="130107" /> 
  <Value nodename="裕华区" nodeid="130108" /> 
  <Value nodename="井陉县" nodeid="130121" /> 
  <Value nodename="正定县" nodeid="130123" /> 
  <Value nodename="栾城县" nodeid="130124" /> 
  <Value nodename="行唐县" nodeid="130125" /> 
  <Value nodename="灵寿县" nodeid="130126" /> 
  <Value nodename="高邑县" nodeid="130127" /> 
  <Value nodename="深泽县" nodeid="130128" /> 
  <Value nodename="赞皇县" nodeid="130129" /> 
  <Value nodename="无极县" nodeid="130130" /> 
  <Value nodename="平山县" nodeid="130131" /> 
  <Value nodename="元氏县" nodeid="130132" /> 
  <Value nodename="赵　县" nodeid="130133" /> 
  <Value nodename="辛集市" nodeid="130181" /> 
  <Value nodename="藁城市" nodeid="130182" /> 
  <Value nodename="晋州市" nodeid="130183" /> 
  <Value nodename="新乐市" nodeid="130184" /> 
  <Value nodename="鹿泉市" nodeid="130185" /> 
  </Value>
<Value nodename="唐山市" nodeid="130200">
  <Value nodename="市辖区" nodeid="130201" /> 
  <Value nodename="路南区" nodeid="130202" /> 
  <Value nodename="路北区" nodeid="130203" /> 
  <Value nodename="古冶区" nodeid="130204" /> 
  <Value nodename="开平区" nodeid="130205" /> 
  <Value nodename="丰南区" nodeid="130207" /> 
  <Value nodename="丰润区" nodeid="130208" /> 
  <Value nodename="滦　县" nodeid="130223" /> 
  <Value nodename="滦南县" nodeid="130224" /> 
  <Value nodename="乐亭县" nodeid="130225" /> 
  <Value nodename="迁西县" nodeid="130227" /> 
  <Value nodename="玉田县" nodeid="130229" /> 
  <Value nodename="唐海县" nodeid="130230" /> 
  <Value nodename="遵化市" nodeid="130281" /> 
  <Value nodename="迁安市" nodeid="130283" /> 
  </Value>
</Value>
</Value>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/timy/p/1760377.html