使用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属性和元素

回答

相关问题