使用 .each() 对子项进行 jQuery XML 遍历

Question

我正在尝试解析 xml 以在 div 中输出，但我遇到了孩子的问题。

我做错了什么？我必须在不修改 xml 的情况下解析它。

预期输出：

会员 1

爱好：
-爱好 1
-爱好 1
-爱好 1

会员 2

爱好：
-爱好 2
-爱好 2
-爱好 2

实际输出：

会员 1

爱好：
-爱好 1
-爱好 1
-爱好 1
-爱好 2
-爱好 2
-爱好 2

会员 2

爱好：
-爱好 1
-爱好 1
-爱好 1
-爱好 2
-爱好 2
-爱好 2

XML：

 <members>
  <person>
    <name>Member 1</name>
    <hobbies>
     <hobby>Hobby 1</hobby>
     <hobby>Hobby 1</hobby>
     <hobby>Hobby 1</hobby>
    </hobbies>
   </person>
   <person>
   <name>Member 2</name>
   <hobbies>
     <hobby>Hobby 2</hobby>
     <hobby>Hobby 2</hobby>
     <hobby>Hobby 2</hobby>
   </hobbies>
</person>

代码：

<script>
  $(document).ready(function(){
    $.ajax({
    type: "GET",
    url: "test.xml",
    dataType: "xml",
    success: function(xml) {
      $(xml).find('person').each(function(){
        $('.members').append(
          '<div class="person">' +
          '<h2>' + $(this).find('name').text() + '</h2>' +
          '<br />' +
          '<h3>Hobbies:</h3>' +
          '<br />' +
          '<ul class="hobbies">' +
          '</ul>' +
          '</div>' +
          '<br />' +
          '<br />'
           )
        });

        $(xml).find('hobbies').children().each(function () {
          $('<li>' + $(this).text() + '</li>').appendTo('.hobbies')
        });
       }
      });
    });
 </script>

Answer 1

你只需要找到它当前的孩子。

$(document).ready(function(){
    $.ajax({
    type: "GET",
    url: "test.xml",
    dataType: "xml",
    success: function(xml) {
      $(xml).find('person').each(function(){
        $('.members').append(
          '<div class="person">' +
          '<h2>' + $(this).find('name').text() + '</h2>' +
          '<br />' +
          '<h3>Hobbies:</h3>' +
          '<br />' +
          '<ul class="hobbies">' +
          '</ul>' +
          '</div>' +
          '<br />' +
          '<br />'
           )

           $(this).find('hobbies').children().each(function () {
                $('<li>' + $(this).text() + '</li>').appendTo('.hobbies')
            });
        });
       }
      });
    });

Answer 2

您寻找爱好的内部循环是找到您的 xml 的两个 <hobbies> 节点。你需要更具体。您可以通过在 .each 循环中引用您正在访问的元素来做到这一点：

<script>
  $(document).ready(function(){
    $.ajax({
    type: "GET",
    url: "test.xml",
    dataType: "xml",
    success: function(xml) {
      // In your callback, name the reference to index and element
      $(xml).find('person').each(function(num, elem){
        $('.members').append(
          '<div class="person">' +
          '<h2>' + $(this).find('name').text() + '</h2>' +
          '<br />' +
          '<h3>Hobbies:</h3>' +
          '<br />' +
          '<ul class="hobbies">' +
          '</ul>' +
          '</div>' +
          '<br />' +
          '<br />'
        );

        // only find the hobbies node of this element, not whole xml
        $(elem).find('hobbies').children().each(function () {
          $('<li>' + $(this).text() + '</li>').appendTo('.hobbies')
        });
      });


    }
    });
  });
</script>