使用 javascript 从 ul li 获取每个层次结构级别的字符串行

Question

我需要有一个来自 ul li 的字符串列表，使用 Javascript 将斜杠 (/) 分隔到 ul li 的第 n 级。

我尝试了 Jquery.map 和每个函数，但没有找到任何运气。

<ul id="1">
    <li><a href="#">First</a></li>
    <li><a href="#">Second</a>
    <ul id="2">
        <li><a href="#">Second - 1</a></li>
        <li><a href="#">Second - 2</a></li>
        <li><a href="#">Second - 3</a>
        <ul id="3">
            <li><a href="#">Aaa</a></li>
            <li><a href="#">Bbb</a></li>
            <li><a href="#">Ccc</a></li>
        </ul>
        </li>
    </ul>
    </li>
    <li><a href="#">Third</a></li>
</ul>

要求的结果：

First
Second/Second - 1
Second/Second - 2
Second/Second - 3/Aaa
Second/Second - 3/Bbb
Second/Second - 3/Ccc
Third

Answer 1

正如评论者所说，递归是诀窍。在循环<ul> 时，您需要检查每个<li> 是否存在嵌套的<ul>。如果是这样，您将再次调用该函数，并传递嵌套的<ul>，以及字符串的“前缀”。

编辑：

根据您的 cmets，默认参数（可能还有其他 (...) 运算符）将导致您的浏览器出现问题。

分叉的 JSFiddle：https://jsfiddle.net/h56zeqkg/

这是一个带有一些旧的、IE11 友好的 JS 的版本：

function stringBuilder(ul, prefix) {
    prefix = prefix || '';
    var arr = [].slice.call(ul.children);
    var stringArr = arr.map(function (li) {
        if (li.children.length > 1) {
            return stringBuilder(li.querySelector('ul'), prefix + li.querySelector('a').textContent + '/');
        } else {
            return prefix + li.querySelector('a').textContent;
        }
    });
    return [].concat.apply([], stringArr);
}

stringBuilder(document.querySelector('ul'));

原文：

JSFiddle：https://jsfiddle.net/hvojpds6/

这是JS的sn-p：

function stringBuilder(ul, prefix = '') {
    return [].concat(...Array.from(ul.children).map(li => {
        // recurse
        if (li.children.length > 1) {
            return stringBuilder(li.querySelector('ul'), prefix + li.querySelector('a').textContent + '/');
        } else {
            return prefix + li.querySelector('a').textContent;
        }
    }))
}

stringBuilder(document.querySelector('ul'));

stringBuilder 的输出将是 array，具有以下内容：

stringBuilder(document.querySelector('ul'))
    (7) ["First", "Second/Second - 1", "Second/Second - 2", "Second/Second - 3/Aaa", "Second/Second - 3/Bbb", "Second/Second - 3/Ccc", "Third"]
    0: "First"
    1: "Second/Second - 1"
    2: "Second/Second - 2"
    3: "Second/Second - 3/Aaa"
    4: "Second/Second - 3/Bbb"
    5: "Second/Second - 3/Ccc"
    6: "Third"
    length: 7
    __proto__: Array(0)

Answer 2

使用递归函数遍历你的 DOM

//Main recursion
function getChildPaths($elements, parentPath) {

    //Traverse the children of each level
    $elements.children().each(function(){
    
    
      if ($(this).prop('tagName') === 'LI'){       

        //Check if this level has children
        if ($(this).children('UL').length > 0) {

          getChildPaths($(this).children('UL'), `${parentPath}/${$(this).children('A').html()}`) 
          
        }
        else {
          //Show the path if no children
          console.log(`${parentPath}/${$(this).children('A').html()}`)
        }
      }
        
    })   
}


getChildPaths($('#1'), '');

.as-console-wrapper {
  max-height: 200% !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="1">
    <li><a href="#">First</a></li>
    <li><a href="#">Second</a>
    <ul id="2">
        <li><a href="#">Second - 1</a></li>
        <li><a href="#">Second - 2</a></li>
        <li><a href="#">Second - 3</a>
        <ul id="3">
            <li><a href="#">Aaa</a></li>
            <li><a href="#">Bbb</a></li>
            <li><a href="#">Ccc</a></li>
        </ul>
        </li>
    </ul>
    </li>
    <li><a href="#">Third</a></li>
</ul>

Answer 3

使用children() 和each() 方法的递归函数

function getHierarchy($ul, level = '') {

  $ul.children('li').each(function(i, li) {
    let text = $(li).children('a').text();
    let list = $(li).children('ul');
    (list.length) 
      ? getHierarchy(list, level + text + '/')
      : console.log(level + text)
  });
  
}

getHierarchy($('#1'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="1">
  <li><a href="#">First</a></li>
  <li><a href="#">Second</a>
    <ul id="2">
      <li><a href="#">Second - 1</a></li>
      <li><a href="#">Second - 2</a></li>
      <li><a href="#">Second - 3</a>
        <ul id="3">
          <li><a href="#">Aaa</a></li>
          <li><a href="#">Bbb</a></li>
          <li><a href="#">Ccc</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Third</a></li>
</ul>

Answer 4

function recursive_loop(parent, text) {
    if (text) {
        var c = parent.children;
        for (let i = 0; i < c.length; i++) {
            var t = c[i].getElementsByTagName('a')[0].textContent;                
            if (c[i].getElementsByTagName('ul').length) {
                return recursive_loop(c[i].getElementsByTagName('ul')[0], text + '/' + t);
            }else{
                console.log(text + '/' + t);
            }
        }
    }
}
var parent = document.getElementById('1');
var c = parent.children;
for (let i = 0; i < c.length; i++) {
    var text = c[i].getElementsByTagName('a')[0].textContent;        
    if (c[i].getElementsByTagName('ul').length) {
        recursive_loop(c[i].getElementsByTagName('ul')[0], text);
    }else{
       console.log(text); 
    }
}    
recursive_loop(parent);