基於字符串輸入生成嵌套的HTML列表。香草JS

Question

我有一個algorythmic問題與生成動態嵌套列表。在輸入我得到一個像這樣的字符串數組：

['A'，'A'，'/ B'，'// C'，'/ B'，'// C'，'A'， 'A']

每個'/'是層次結構中的下一個層次，它是具有較少量'/'符號的最後一個元素的直接子節點。具有相同數量的'/'符號的元素處於同一級別。

像['A'，'// C']或['// C']的輸入無效。

結果的，應在層次 一個 一個 -B --C -B --C HTML列表一 一個

這是迄今爲止我所做的： https://jsfiddle.net/k18Lbou7/

function createList(depth, elements, iterator, parentElement) { 
     var newDepth = 0; 
     for(var i=iterator; i<elements.length; i++) { 
     var match = elements[i].text.match(/^\s*(\/+)/); 
     if(match == null) { 
      newDepth = 0; 
     } else { 
      newDepth = match[0].length; 
     } 
     if (depth == newDepth-1) { 
      var nestedList = document.createElement('ul'); 
      parentElement.lastChild.appendChild(nestedList); 
      createList(newDepth, elements, i, nestedList); 
     } else if (depth == newDepth) { 
      var nextElement = document.createElement('li'); 
      var span = document.createElement('span'); 
      span.innerHTML = elements[i].text; 
      nextElement.appendChild(span); 
      parentElement.appendChild(nextElement); 
     } 
     } 
    } 

var value = ['Home', '* This is active', '/This is dropdown', '// shhh...', '/ we ♥ you', '//Last one', 'Last one', 'Last one'] 
     .map(function(pLine) { 
      return { 
      'text': pLine, 
      'page_id': null 
      }; 
     }); 

var listElement = document.createElement('ul'); 

createList(0, value, 0, listElement); 

document.body.appendChild(listElement); 

關鍵是我複製了一些鍵，或者避免了不同方法中的最後一個元素。

也許有人可以幫助找出不好的結果的原因或提出解決此功能的不同方法。

非常感謝您的幫助！

Answer 1

好吧，我沒有id。這是一個答案。

function createList(elements, parentElement) { 
    var parentsList = [parentElement]; 
    var depth = 0; 
    elements.forEach(function(item) { 
    var match = item.text.match(/^\s*(\/+)/); 
    if(match) { 
     depth = match[0].length; 
    } else { 
     depth = 0; 
    } 
    var listElement = document.createElement('li'); 
    var span = document.createElement('span'); 
    span.innerHTML = item.text 
    listElement.appendChild(span); 
    if (parentsList.length-1 == depth) { 
     parentsList[parentsList.length-1].appendChild(listElement); 
    } else if (parentsList.length-1 < depth) { 
     var parentListElement = document.createElement('ul'); 
     parentListElement.appendChild(listElement); 
     parentsList[parentsList.length-1].appendChild(parentListElement); 
     parentsList.push(parentListElement); 
    } else { 
     while (parentsList.length-1 > depth) { 
     parentsList.pop(); 
     } 
     parentsList[parentsList.length-1].appendChild(listElement); 
    } 
    });  
} 
var el = document.createElement('ul'); 

var value = ['Home', '* This is active', '/This is dropdown', '// shhh...', '/ we ♥ you', '//Last one', 'asd', '/Last one', 'Last one'] 
     .map(function(pLine) { 
      return { 
      'text': pLine, 
      'page_id': null 
      }; 
     }); 

createList(value, el); 

document.body.appendChild(el);