根据字符串输入生成嵌套的 HTML 列表.香草JS

Generating nested HTML list, based on string input. Vanilla JS

本文关键字：HTML 列表 香草 JS 嵌套 字符串 输入      更新时间：2023-09-26

我在生成动态嵌套列表时遇到了一个算法问题。在输入时，我得到一个这样的字符串数组：

["A"、"A"、"/B"、"//C"、"/B"、"/

/C"、"A"、"A"]

每个"/"

都是层次结构中的下一级，它是最后一个元素的直接子元素，具有较少的"/"符号。具有相同数量的"/"符号的元素位于同一级别。

['A'、'/

/C'] 或 ['//C'] 等输入无效。

结果应该是层次结构中的 HTML 列表一个一个-B--C-B--C一个一个

到目前为止，这就是我所做的：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);

关键是我正在复制一些键，或者避免以不同的方法使用最后一个元素。

也许有人可以帮助mi发现不良结果的原因或建议解决此功能的不同方法。

非常感谢您的帮助！

好的，我做了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);
相关文章：