Đa cấp xml vào danh sách không theo thứ tự trong jquery

Tôi đang kéo tóc ra cố gắng tạo một danh sách không theo thứ tự từ tệp xml mà không có may mắn cho đến nay.I biết cách xử lý xml từ jQuery nhưng tôi không thể tìm ra cách tạo danh sách không có thứ tự đa cấp.Đa cấp xml vào danh sách không theo thứ tự trong jquery

Đây là những gì tôi đã đạt được cho đến nay.

Các xml nộp

<?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>

Các tập tin 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>

Đây là danh sách dự kiến

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

thể các bạn hãy giúp tôi ra!

Edit:

<!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>

Nguồn

2012-09-29 Harsha Venkatram

@Bergi Tôi hiểu rằng tôi cần phải lặp lại 'Trẻ em' để tạo danh sách. Nhưng để làm điều đó một cách đệ quy, tôi có cần phải hành động theo' cha mẹ ("Cha mẹ") '? Kiến thức của tôi trong jQuery khá hạn chế. –

Nó không phải là một vấn đề jQuery, nhưng là một vấn đề lập trình chuẩn. Bạn có thể (và nên?) Giải quyết nó mà không cần jQuery, quá. Cố gắng lặp lại cây DOM *, thay vì tất cả các phần tử (của một loại) cùng một lúc. – Bergi

Đệ quy xây dựng danh sách không có thứ tự:

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

Dưới đây là một DEMO. Hãy suy nghĩ của mỗi nhóm Parent và tương ứng Children như một đơn vị riêng biệt. Ví dụ, nếu XML của bạn trông giống như sau:

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

HTML kết quả sẽ là:

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

Làm thế nào bạn sẽ xây dựng này? Nó khá đơn giản: tạo một phần tử <ul> và cho mỗi phần tử Children nối thêm một phần tử <li> vào nó. Bây giờ, đối với phần đệ quy, khi bạn giới thiệu một Parent khác, bạn chỉ cần tạo lại một lần nữa <ul> là nếu nó là một đơn vị duy nhất và nối kết quả của nó với số cha mẹ<ul>.

Lưu ý rằng chức năng mà tôi đã sử dụng ở trên đòi hỏi một đối tượng jQuery để thông qua như là một cuộc tranh cãi, do đó bạn cần phải thay đổi success xử lý của bạn:

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

Nguồn

2012-09-29 16:41:02

Silva: $ xml.contents() đang ném một lỗi: (Uncaught TypeError: Object # không có phương thức 'content' –

@harsha: Chuyển đối tượng jQuery vào hàm, rằng điều này, sử dụng hàm 'success: function (xml)) {xmlParser ($ (xml));} '. –

@Silva: cảm ơn vì tất cả sự giúp đỡ. Nhưng tôi không thể lấy danh sách đúng định dạng. Điều gì đang xảy ra là danh sách cá nhân đang được tạo ra thay vì lồng nhau một. Tôi đang cập nhật các mã mới nhất ở đây. Bạn có thể hãy xem nó. –

đầu tiên, thay đổi cú pháp success: xmlParser,

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

Nguồn

2012-09-29 16:41:13

Đa cấp xml vào danh sách không theo thứ tự trong jquery

Trả lời

Các vấn đề liên quan