jqueryの複数レベルのXMLから順序付けられていないリスト

xmlファイルから順不同のリストを作成しようとしています。jQueryからxmlを処理する方法はわかりますが、わかりませんマルチレベルの順序付けられていないリストを作る方法。jqueryの複数レベルのXMLから順序付けられていないリスト

ここまでは私がこれまで達成してきたことです。

xmlファイル

<?xml version="1.0" encoding="utf-8"?> 
<Parent>Director 
    <Children>Exe Director1</Children> 
    <Children>Exe Director2</Children> 
    <Parent>Exe Director2 
     <Children>Sub Director 1</Children> 
     <Children>Sub Director 2</Children> 
     <Parent>Sub Director 3 
      <Children>Cameraman 1</Children> 
      <Children>Cameraman 2</Children> 
     </Parent> 
    </Parent>  
</Parent>

htmlファイル

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    var levels; 
    $(document).ready(function() 
    { 
     $.ajax({ 
      type: "GET", 
      url: "test.xml", 
      dataType: "xml", 
      success: xmlParser 
     }); 
    }); 
    function xmlParser(xml) 
{ 
    $(xml).find("Children").each(function() 
    { 
     var text = $(this).text(); 
    }); 
} 
</script> 
</head> 
<body> 
    <div id="ListContainer"></div> 
</body> 
</html>

これは、予想されるリスト

<ul> 
    <li>Exe Director1</li> 
    <li>Exe Director2</li> 
    <ul> 
     <li>Sub Director 1</li> 
     <li>Sub Director 2</li> 
     <ul> 
      <li>Cameraman 1</li> 
      <li>Cameraman 2</li> 
     </ul> 
    </ul> 
</ul>

あなたたちは私を助けてくださいすることができます！

編集：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
    var levels; 
    $(document).ready(function() 
    { 
     $.ajax({ 
      type: "GET", 
      url: "test.xml", 
      dataType: "xml", 
      success: function (xml) { xmlParser($(xml)); } 
     }); 
    }); 
    function xmlParser(xml) { 
     //alert($(xml).contents()); 
     var $ul = $("<ul>"); // For each Parent, create an <ul> 
     $(xml).contents().each(function (i, el) { 
      if (el.nodeType == 3) return true; 
      if (el.nodeName.toUpperCase() == "CHILDREN") 
      { 
       $("<li>").text($(el).text()).appendTo($ul); // Append <li> Children 
      } else 
      { 
       $ul.append(xmlParser($(el))); // Recursively append the other Parent 
      } 
      //$("#ListContainer").append($ul); 
     }); 
     //alert($ul.html()); 
     $("#ListContainer").append($ul); 
    } 
</script> 
</head> 
<body> 
    <div id="ListContainer"></div> 
</body> 
</html>

出典

2012-09-29 Harsha Venkatram

@Bergiリストを作成するために「子供」を反復する必要があることを理解しています。再帰的に行うには、「親（「親」）に対処する必要がありますか？ jQueryの知識はかなり限られています。 –

これはjQueryの問題ではなく、標準のプログラミング問題です。あなたはjQueryを使わなくてもそれを解決することができます。一度にすべての要素（1つのタイプの）ではなく、DOM * tree *を反復しようとします。 – Bergi

再帰的に順不同リストを作成：

function xmlParser($xml) { 
    var $ul = $("<ul>"); // For each Parent, create an <ul> 
    $xml.contents().each(function (i, el) { 
     if (el.nodeType == 3) return true; 
     if (el.nodeName.toUpperCase() == "CHILDREN") { 
      $("<li>").text($(el).text()).appendTo($ul); // Append <li> Children 
     } else { 
      $ul.append(xmlParser($(el))); // Recursively append the other Parent 
     } 
    }); 
    return $ul; 
}

はここDEMOです。各グループParentとそれぞれChildrenを別々のユニットと考えてください。あなたのXMLは、次のように見えた場合たとえば、：

<Parent>Director 
    <Children>Exe Director1</Children> 
    <Children>Exe Director2</Children> 
</Parent>

結果のHTMLは次のようになります。

<ul> 
    <li>Exe Director1</li> 
    <li>Exe Director2</li> 
</ul>

あなたがこれをどのように構築するのでしょうか？それは非常に単純です：<ul>要素を作成し、それぞれChildrenに<li>要素を追加します。さて、再帰的な部分については、別のParentを導入するときには、それが単一のユニットであればもう一度<ul>を作成し、その結果を親の<ul>に追加するだけです。私は上記の使用してきた機能は、このようにあなたがあなたのsuccessハンドラを変更する必要があるだろう、引数として渡されたにjQueryオブジェクトが必要であることを

注：

は

success: function (xml) { 
    xmlParser($(xml)); 
}

出典

2012-09-29 16:41:02

Silva：$ xml.contents（）がエラーをスローしています:(Uncaught TypeError：オブジェクト＃にメソッド 'contents'がありません –

@harsha：関数にjQueryオブジェクトを渡します。 @ xxxParser（$（xml））;} '。 –

@Silva：すべての助けてくれてありがとう。しかし、私は正しいフォーマットでリストを手に入れることができない。何が起こっているのは、個々のリストがネストされたものです。ここで最新のコードを更新しています。ご覧ください。 –

まず、success: xmlParser構文を変更し、

success: function(data){ 
    xmlParser(data) 
}

出典

2012-09-29 16:41:13

jqueryの複数レベルのXMLから順序付けられていないリスト

答えて

関連する問題