使用javascript或jquery將xml轉換為html

Question

我有xml文件，其中包含一些詳細信息，我想從中選擇一些值，我做了那個javascript，但是我離我的要求不近，我想從條件方面選擇值。

<edata updated="2012:12:32.697" product_type_id="3" product_type="epack" headline="Gold Coast" destination="india" localised_destination="Gold Coast" headline_no_html="Gold Coast" price="372" />
<edata updated="2012:12:32.697" product_type_id="3" product_type="epack" headline="Gold Coast" destination="china" localised_destination="Gold Coast" headline_no_html="Gold Coast" price="450" />

這是我在xml文件中丟失數據的示例。

標頭中的javascript

<script type="text/javascript">
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","edata.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML; 
</script>

身體部位的代碼

<div id="Frame2">
  <script type="text/javascript">
    function load()
    {
      alert("Page is loaded");
    }
    var x=xmlDoc.getElementsByTagName("edata");
    document.write("<div>");
    document.write(x[0].getAttribute('price'));
    document.write("</div>");
  </script>
</div>

請注意，我的代碼在第一個div中獲取第一個edata值，我想按條件獲取中國價格值。

Answer 1

我假設由於您在此上標記了“ jquery”，所以您正在使用jquery（盡管您的代碼示例並不暗示這一點）。 使用jQuery，您可以（使用jQuery.ajax然后再更簡潔地獲取數據）：

<div id="Frame2">
  <script type="text/javascript">
    function load()
    {
      alert("Page is loaded");
    }
   $xml = $( xmlDoc ),
   $title = $xml
     .find( "edata[price]" ) //gets all nodes with a price
     .filter( function(i) {
         // filter out all the items that have a price less than 100
         return ( parseInt( this.attr("price") ) > 100 ) ? true : false;
     })
   ; 
  </script>
</div>

如果您不想使用jQuery，則必須循環使用它：

<div id="Frame2">
  <script type="text/javascript">
    function load()
    {
      alert("Page is loaded");
    }
    var x=xmlDoc.getElementsByTagName("edata");
    var i, l = x.length;
    var price;
    for( i = 0; i < l; i++ ){
      price = x[i].getAttribute( 'price' );
      if( typeof price !== "undefined" && parseInt( price ) > 100 ){
        document.write("<div>" + price + "</div>");
      }
    }
  </script>
</div>