Question

我搜索了大部分论坛，找不到我要找的内容。我想做以下事情：

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以这种方式循环遍历属性和元素的基本理解。

Answer 1

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>");
});

Answer 2

希望这会有所帮助：）

<%@ 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>

使用jQuery循环遍历XML属性和元素

2 个答案: