多級xml到無序列表jquery

我拉我的頭髮出來試圖從xml文件創建一個無序列表到目前爲止沒有運氣。我知道如何從jQuery處理xml，但我無法弄清楚如何製作多級無序列表。多級xml到無序列表jquery

這是我迄今取得的成就。

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我明白我需要迭代'Children'來創建列表。但要遞歸執行，是否需要對父母（「Parent」）進行操作？我在jQuery方面的知識非常有限。 –

這不是一個jQuery問題，而是一個標準的編程問題。你可以（也應該）在沒有jQuery的情況下解決它。嘗試一次遍歷DOM *樹*，而不是一個類型的所有元素。 – 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>。

請注意我上面使用的功能要求作爲參數傳遞一個jQuery對象，所以你需要改變你的success處理程序：

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

來源

2012-09-29 16:41:02

Silva：$ xml.contents（）拋出一個錯誤:(未捕獲的TypeError：對象＃沒有方法'內容' –

@harsha：將一個jQuery對象傳遞給函數，使用'success：function（xml ）{xmlParser（$（xml））;}'。 –

@Silva：感謝所有的幫助。但我無法以正確的格式獲取列表。發生的事情是，單個列表正在創建，而不是嵌套one.I更新最新代碼here.Can你請看看它。 –

第一，改變success: xmlParser語法，

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

來源

2012-09-29 16:41:13

多級xml到無序列表jquery

回答

相關問題