使用jQuery循環瀏覽XML屬性和元素

我搜索了大部分論壇，無法找到我要找的內容。我要做到以下幾點：使用jQuery循環瀏覽XML屬性和元素

XML文件：

<vaardigheden> 
<vaardigheid soort="techniek">HTML/CSS</vaardigheid> 
<vaardigheid soort="techniek">PHP/MySQL</vaardigheid> 
<vaardigheid soort="techniek">Javascript</vaardigheid> 
<vaardigheid soort="Instrument">Drums</vaardigheid> 
<vaardigheid soort="Instrument">Gitaar</vaardigheid> 
</vaardigheden>

我想通過屬性和元素循環和得到這樣的結果：

Techniek的

HTML/CSS
PHP/MySQL
Javascript

儀器

鼓
吉他

有沒有人有一個想法如何實現這一目標？只需要對通過jQuery以這種方式遍歷屬性和元素的基本理解。

來源

2012-04-02 hope_industries

http://api.jquery.com/category/selectors/ – mplungjan 2012-04-02 13:55:44

玩這個。我將返回http://jsfiddle.net/mplungjan/VHEcC/ – mplungjan 2012-04-02 14:00:28

DEMO

enter image description here

使用parseXML每個 - 注意劇本上是一個字符串這裏或ajaxed文件將正常工作。

var xml = '<vaardigheden> <vaardigheid soort="techniek">HTML/CSS</vaardigheid> <vaardigheid soort="techniek">PHP/MySQL</vaardigheid><vaardigheid soort="techniek">Javascript</vaardigheid><vaardigheid soort="Instrument">Drums</vaardigheid><vaardigheid soort="Instrument">Gitaar</vaardigheid></vaardigheden>', 
xmlDoc = $.parseXML(xml), 
$xml = $(xmlDoc), 
$vaardigheden = $xml.find("vaardigheid"); 
var currentSoort = "", content = $("#content"); 
$.each($vaardigheden,function(i,item) { 
    var soort = $(this).attr('soort'); 
    if (soort != currentSoort) { 
     content.append("<dt>"+soort+"</dt>"); 
     currentSoort = soort; 
    } 
    content.append("<dd>"+$(this).text()+"</dd>"); 
});

來源

2012-04-02 14:02:18 mplungjan

謝謝！這段代碼很簡單，它的工作完美！ – 2012-04-02 17:19:50

不客氣 - 原來是這樣的 – mplungjan 2012-04-02 20:27:34

希望這有助於:)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>XML JQUERY Example</title> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 

    function parseXml(xml) 
    { 
     var titles = []; 
     var newL ; 
     $(xml).find("vaardigheid").each(function() 
     { 
      if (jQuery.inArray($(this).attr("soort"), titles)==-1){//append new title 
       newL = '<label>'+$(this).attr("soort")+'</label><br/>'; 
       var newList = '<ul id="' + $(this).attr("soort") + '" \><li>'+$(this).text()+'</li></ul>'; 
       $("#output").append($(newL)); 
       $("#output").append($(newList)); 
       titles.push($(this).attr("soort")); 
      } 
      else{ 
       var newItem = '<li>'+$(this).text()+'</li>'; 
       $("#"+$(this).attr("soort")).append($(newItem)); 
      } 

     }); 

    } 

    $.ajax({ 
     type: "GET", 
     url: "myFile.xml", 
     dataType: "xml", 
     success: parseXml 
    }); 

}); 
</script> 
</head> 

<body> 

<div id="output"></div> 

</body> 

</html>

來源

2012-04-02 14:33:14

爲什麼老jQuery和爲什麼腳本在身體？你的輸出是非法的我得到了'id =「techniek」=「」' – mplungjan 2012-04-02 15:03:49

我得到了'id =「techniek」'=「」' - 你的意思是'id =''+ $（this）.attr（「soort 「）+'」>' – mplungjan 2012-04-02 15:09:29

@mplungjan你說得對。錯過了一個額外的角色。我糾正了它，並將腳本移動到頭部。我通常在主體中使用腳本，因爲用戶不必等待腳本，根據http://javascript.info/tutorial/adding-script-html，但在這種情況下，這並不重要。 – 2012-04-03 14:07:34

使用jQuery循環瀏覽XML屬性和元素

回答

相關問題