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

Question

我需要使用slash（/）将ul li中的字符串列表分开，直到使用Java语言将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>和字符串的“ prefix”传递给该函数。

编辑：

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

分叉的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);