Javascript 使用jQuery遍历XML属性和元素_Javascript_Jquery_Html_Css

Javascript 使用jQuery遍历XML属性和元素

javascript jquery html css

Javascript 使用jQuery遍历XML属性和元素,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我已经搜索了大多数论坛，找不到我要找的内容。我想做以下工作： XML文件： <vaardigheden> <vaardigheid soort="techniek">HTML/CSS</vaardigheid> <vaardigheid soort="techniek">PHP/MySQL</vaardigheid> <vaardigheid soort="techniek">Javascript</vaardi

我已经搜索了大多数论坛，找不到我要找的内容。我想做以下工作：

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>


HTML/CSS
PHP/MySQL
Javascript
鼓
吉塔尔

我想循环遍历属性和元素并得到以下结果：

Techniek

HTML/CSS
PHP/MySQL
Javascript

仪器

鼓
吉他

有人知道如何做到这一点吗？只需要基本了解jQuery以这种方式循环属性和元素。

使用和each-NOTE，脚本将在字符串（如此处所示）或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>");
});

var-xml='HTML/CSS-PHP/MySQLJavascriptDrumsGitaar'，
xmlDoc=$.parseXML（xml），
$xml=$（xmlDoc），
$vaardigheden=$xml.find（“vaardigheid”）；
var currentSoort=“”，content=$（“#content”）；
$。每个（$vaardigheden，功能（i，项目）{
var soort=$（this.attr（'soort'）；
if（soort！=currentSoort）{
content.append（“+soort+”）；
currentSoort=soort；
}
content.append（“+$（this.text（）+”）；
});

希望这有帮助：）


XMLjQuery示例
$（函数（）{
函数解析xml（xml）
{ 
var标题=[]；
var newL；
$（xml）.find（“vaardigheid”）.each（函数（）
{
if（jQuery.inArray（$（this.attr（“soort”），titles）=-1）{//追加新标题
newL=''+$（this.attr（“soort”）+'
；
var newList=''+$（this.text（）+''；
$（“#输出”）.append（$（newL））；
$（“#输出”）。追加（$（新列表））；
titles.push（$（this.attr（“soort”））；
}
否则{
var newItem=''+$（this.text（）+''；
$（“#”+$（this.attr（“soort”））.append（$（newItem））；
}
});
}
$.ajax({
键入：“获取”，
url:“myFile.xml”，
数据类型：“xml”，
成功：parseXml
});
});

玩这个。我将在正文中返回为什么使用旧jQuery和为什么使用脚本？您的输出是非法的，我得到

id=“techniek”=“我得到id=“techniek”=“你的意思是id=“+$（this）.attr（“soort”）+”>@mplungjan您是对的。错过了一个额外的“角色”。我纠正了它，并在头部移动了脚本。我通常在正文中使用脚本，“因为用户不必等待脚本”，根据，但在这种情况下，这并不重要。
<%@ 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>