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

Question

我需要有一个字符串列表，从ul li用斜杠(/(分隔，直到使用Javascript的第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>以及字符串的"前缀"。

编辑：

根据您的注释，默认参数(可能还有其余(...(运算符(将导致浏览器出现问题。

Forked 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 的片段：

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