2013-04-29 36 views
1

我有我这样的XML文件。jQuery获取XML列出样式

<products> 
<product> 
    <name>Product title</name> 
    <items> 
    <item>AB123</item> 
    <item>BC456</item> 
    <item>CD6543</item> 
    </items> 
</product> 
<product> 
    <name>Product title</name> 
    <items> 
    <item>AB123</item> 
    <item>BC456</item> 
    <item>CD6543</item> 
    </items> 
</product> 
</products> 

我该如何轻松使用jQuery将它转换为在页面上列出样式?

我的文件被称为products.xml

<ul> 
<li>Product title 
    <ul> 
    <li>AB1234</li> 
    <li>BC456</li> 
    <li>CD6543</li> 
    </ul> 
</li> 
<li>Product title 
    <ul> 
    <li>AB1234</li> 
    <li>BC456</li> 
    <li>CD6543</li> 
    </ul> 
</li> 
</ul> 

任何帮助,不胜感激! 谢谢!

+0

看一看这样的:http://api.jquery.com/jQuery.parseXML/ – 2013-04-29 13:27:35

回答

0

像这样的事情也许

var products = $('<ul>'); 

$(xml).find('product').each(function() { 
    var li = $('<li>'), 
     self = $(this); 
    li.text(self.find('name').text()); 

    var children = $('<ul>'), 
     items = self.find('item'); 

    items.each(function() { 
     children.append($('<li>').text($(this).text())); 
    }); 
    li.append(children); 
    products.append(li); 
}); 

$('body').append(products); 

演示在http://jsfiddle.net/gaby/MdEkg/