遍历dom的灵活用法?

讨论 已结
6 1054
微秀
微秀 2017-12-31
悬赏:20飞吻
有以下这样的dom结构,
有嵌套,又没嵌套的
需要获取最后一个层级的所有span的内容,
有灵活的写法不?

回帖
  • asseek
    2017-12-31
    像这种需求直接用jquery的选择器比较难,不过自己写个简短小函数就行了
    const childrenSpan = (dom, list) => {
    if (dom.children.length) {
    [].forEach.call(dom.children, d => {
    childrenSpan(d, list)
    })
    } else if (dom.tagName === 'SPAN') {
    list.push(dom.innerText)
    }
    };

    let list = [];

    document.querySelectorAll('.editor').forEach(dom => {
    childrenSpan(dom, list);
    });

    console.log(list)
    1 回复
  • 小魔方
    小魔方 VIP2 (社区之光)
    2017-12-31
    给个 class [可怜]
    或者试试
    $('.editor span:not(:has(*))');
    1 回复
  • 微秀
    2017-12-31
    function Selector(cssSelector) {
    var all = document.querySelectorAll(cssSelector);
    var arr = [];
    for (var i = 0; i < all.length; i++) {
    if (all[i].querySelectorAll('*').length == 0) {
    arr.push(all[i])
    }
    }
    return arr;
    }
    1 回复
  • 步尘
    2017-12-31
    @小魔方 最后一个层级,是指被包含的最深的那一层么,然后,如果同时有几个深度为3的span,被包在不同的.editer里面,是全部取出来,还是只取最后一个.editer里面的span,还有,类似这样的嵌套,有没有最深限制,是最多嵌套三四层,还是可以无限嵌套下去,,好多东西你都没说明白,,只有一两层两三层的话,简单的循环就能搞定,无限嵌套的话,就要写递归了,,
    0 回复
  • 微秀
    2017-12-31
    @步尘
    最多就是三个嵌套,不会无限下去

    这个给不了class,因为是一个在线编辑器来的,设置一下格式,就多一个嵌套,
    所有都是2,3个嵌套

    0 回复
  • 微秀
    2017-12-31


    这个办法更灵活~~
    0 回复
本帖已设置禁止回复