2011-08-11 13 views
1

私は、XMLをフォーマットし、下のhtml形式でレンダリングするための専門知識を必要としています。私はJQueryのXMLパーサーを使用していると私はHTML部分だけを構築するのに役立つ必要があります。JQuery XMLパーサ形式のヘルプ

data.xmlに

<xml> 
<rs:data> 
<z:row Category="Sales " URLMenu="http://www.abc.com, Sales.com" /> 
<z:row Category="Products" URLMenu="http://www.google.com, Products.com" /> 
<z:row Category="Sales "URLMenu="http://www.abc.com/services, Services.com" /> 
<z:row Category="Products" URLMenu="http://www.citigroup.net, Financial.com" /> 
<z:row Category="Products" SubCategory="International" URLMenu="http://www.google.com,  United States" /> 
<z:row Category="Products" SubCategory="International" URLMenu="http://www.googe.com, Australia" /> 
</rs:data></xml> 

jQueryの機能の下

<script type="text/javascript"> 
    $(document).ready(function() { 
     var thisHtml = ''; 
     var url = 'xml/Data.xml'; 
     $.get(url, function (d) { 
      $(d).find('z\\:row').each(function() { 
       thisHtml += '<ul>'; 
       { 
        thisHtml += '<li><a href="">' + $(this).attr("Category") + '</a></li>'; 
       } 
       thisHtml += '</ul>'; 
      });    $('bd').append($(thisHtml)); 
     }); 
    }); 
</script> 

動的に作成する必要のあるHTMLスニペットです

<ul> 
<li>Sales 
    <ul> 
     <li><a>Sales.com</a></li> 
     <li><a>Products.com</a></li> 

    </ul> 
</li> 
<li>Products 
    <ul> 
     <li><a>Services.com</a></li> 
     <li><a>Financial.com</a></li> 
     <li>International 
      <ul> 
       <li><a>United States</a></li> 
       <li><a>Australia</a></li> 
      </ul> 
     </li> 
    </ul> 
</li>               

必要なHTML同じ名前の下にあるすべてのカテゴリとURLMenuを別々にグループ化します。 私はJQueryを初めて使用しているので、ループやレンダリングを手伝ってもらえますか?

おかげ

答えて

0

あなたがカテゴリの固定セットを持っている場合は、各ブロックのために、次のセレクタを使用することができ、順次アイテムをレンダリング:

$(d).find('z\\:row[Category="Sales"]').each(...); 
$(d).find('z\\:row[Category="Products"]').each(...); 

はそうでなければ、私はあなたがしなければならないと思います最初の実行でカテゴリ別にデータをグループ化し、グループ化されたデータを2回目に印刷するために、データを2回トラバースします。

テンプレートレンダリングを使用して、HTMLをレンダリングすることも考えられます。http://api.jquery.com/tmpl/