Question

我有一些xml我尝试以这种格式循环：

<nav>
  <folder>
    <form/>
    <form/>
  </folder>
  <folder>
    <form/>
    <form/>
  </folder>
</nav>

我的jquery应该遍历xml并使用列表生成一个移动式菜单：

xmlDoc = $.parseXML(xml);
$xml = $(xmlDoc);
$('#studentMobile').append("<ul>");
$xml.find('folder').each(function(i){   

$('#studentMobile ul').append($('<li>').append($("<a>").attr('href', '#').html($(this).attr("name")))); 
    if($(this).children().length != 0){
        console.log('Length: ' + $(this).children().length);
        $('#studentMobile ul').children().eq(i).addClass('has-sub'); 
        $('#studentMobile ul li').append('<ul>');

        $(this).children().each(function(j){
        $('#studentMobile ul li ul')
            .append($('<li>').attr('ondragstart', 'drag(event)').attr('draggable','true')
                .append($("<a>").attr('href', $(this).attr('url')).html($(this).attr("name"))));            
            });     
         }  
    });

它应该生成一个如下所示的列表：

<li class='has-sub' id="studentMobile"><a href='#'>Students</a>
     <ul>
          <li class='has-sub'><a href='#'>Registration</a>
            <ul>
               <li ondragstart="drag(event)" draggable="true"><a href='http://www.weather.com'>Register for Classes</a></li>
               <li ondragstart="drag(event)" draggable="true"><a href='http://www.amazon.com'>Retake a Course (Academic Forgiveness)</a></li>
               <li ondragstart="drag(event)" draggable="true"><a href='http://www.google.com'>View Your Holds</a></li>
            </ul>
         </li>

我不确定我是否正确使用嵌套的.each，因为在我的第一个循环中，它会在xml中生成所有表单元素。它也没有正确呈现我的html标记，因为它嵌套了另一个＆＃39; ul＆＃39;在我最低的＆＃39; li＆＃39;儿童。我正确使用.each方法吗？我也试过在我的第二个循环中使用$（this）.find（＆＃39; form＆＃39;）。结果相同。如果需要，我可以在其中包含一个html样本。

使用jquery循环遍历xml并渲染结果

0 个答案: