उपयोग jQuery एक मनमाने ढंग से गहरी सूची

Question

जावास्क्रिप्ट में उत्पन्न करने के लिए, मैं वस्तुओं की एक सरणी है कि एक मनमाने ढंग से गहरी सूची का प्रतिनिधित्व करता है ...

data = 
[ 
{ title, depth }, 
{ title, depth }, 
{ title, depth }, 
{ title, depth }, 
] 

... जहां गहराई सूची में कितना गहरा तत्व है है ।

मैं इस डेटा को HTML में परिवर्तित करना चाहता हूं।

उदाहरण के लिए:

[ 
{ title: "one", depth : 1 }, 
{ title: "two", depth : 1 }, 
{ title: "three", depth : 2 }, 
{ title: "four", depth : 3 }, 
{ title: "five", depth : 1 }, 
] 

हो जाता है ...

<ul> 
    <li><p>one</p></li> 
    <li> 
    <p>two</p> 
    <ul> 
     <li> 
     <p>three</p> 
     <ul> 
      <li><p>four</p></li> 
     </ul> 
     </li> 
    </ul> 
    </li> 
    <li><p>five</p></li> 
</ul> 

यह करने के लिए सबसे आसान तरीका jQuery का उपयोग कर, क्या है?

धन्यवाद

Answer 1

यहाँ एक तरह से आप यह कर सकता है:

(function($) { 
    $.listify = function(items) { 
    var container = $('<div></div>'), root = container; 
    var depth = 0; 
    for (var i = 0; i < items.length; ++i) { 
     var item = items[i]; 
     if (item.depth > depth) { 
     while (item.depth > depth) { 
      var ul = $('<ul></ul>').appendTo(container); 
      var li = $('<li></li>').appendTo(ul); 
      container = li; 
      ++depth; 
     } 
     } else if (item.depth <= depth) { 
     while (item.depth < depth) { 
      container = container.parent().parent(); 
      --depth; 
     } 
     container = $('<li></li>').insertAfter(container); 
     } 
     container.append('<p>' + item.title + '</p>'); 
    } 
    return root.children(); 
    } 
})(jQuery); 

मैं मानता हूं, मैं सिर्फ कुछ listify नाम करना चाहता था। Here is a jsFiddle. तुम इतनी है कि यह कहेंगे: कोई बात नहीं

http://jsfiddle.net/wq8QY/

कितने स्तरों आप सभी रास्ते जाने के नीचे यह अभी भी बनाया जाएगा:

$.listify([ 
    { title: "one", depth : 1 }, 
    { title: "two", depth : 1 }, 
    { title: "three", depth : 2 }, 
    { title: "four", depth : 3 }, 
    { title: "five", depth : 1 }, 
]).appendTo(document.body); 

Answer 2

यह एक गतिशील है।

var json = [ 
{ title: "one", depth : 1 }, 
{ title: "two", depth : 10 }, 
{ title: "three", depth : 20 }, 
{ title: "four", depth : 25 }, 
{ title: "five", depth : 11 }, 
] 
    var dom = $('body') ; 
    dom.append($('<ul>')) 
    //console.log(json.length) 
    for(var i = 0; i < json.length; i++){ 
    //console.log(json[i]) 
     var appendTo = $('body') 
     for(var j = 1; j <= json[i].depth; j++){ 
      console.log(appendTo, json[i], json[i].depth, '1st') 
      if(appendTo.children('ul').length <= 0){ 
       console.log('no ul', j) 
       appendTo.append($('<ul>')) 
      } 
      appendTo = $(appendTo.children('ul')) 
      console.log(appendTo, json[i], '2nd') 
     } 
     console.log(appendTo, json[i], 'appending') 
     appendTo.append($('<li><p>'+json[i].title+'</p></li>')) 
    } 

Answer 3

$.fn.listify = function(list) { 
    var stack = [this]; 
    $.each(list, function() { 
     var item = $('<li><p>'+this.title+'</p></li>'); 
     stack[this.depth] = stack[this.depth] 
      ? item.insertAfter(stack[this.depth]) 
      : item.wrap('<ul>').appendTo(stack[this.depth - 1]); 
     stack.length = this.depth + 1; 
    }); 
} 

Answer 4

वर्क्स कई स्तरों से और सही ढंग से टैग घोंसले:

(function ($) { 
    $.makelist = function (arr) { 
    var currentdepth = 1; 
    var root = $('<ul>'); 
    var el = root; 
    var idx = 0; 

    while (idx < arr.length) { 
     if (arr[idx].depth == currentdepth) { 
     el.append($('<li>').html($('<p>').text(arr[idx].title))); 
     idx++; 
     } 
     else if (arr[idx].depth > currentdepth) { 
     newel = $('<ul>'); 
     el.append(newel); 
     el = newel; 
     currentdepth++; 
     } 
     else { 
     el = el.parent('ul'); 
     currentdepth--; 
     } 
    } 
    return root; 
    } 
})(jQuery); 

     $(document).ready(function() { 
      arr = [ 
        { title: "one", depth: 1 }, 
        { title: "two", depth: 1 }, 
        { title: "three", depth: 2 }, 
        { title: "four", depth: 3 }, 
        { title: "five", depth: 1 }, 
        ]; 

      $('body').append($.makelist(arr)); 
     });