V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
LuyeeTom
V2EX  ›  JavaScript

JS 如何获取多层嵌套的 Class 元素?

  •  
  •   LuyeeTom · 2021-05-16 18:01:06 +08:00 · 1571 次点击
    这是一个创建于 1047 天前的主题,其中的信息可能已经有所发展或是发生改变。
    求帮助,Wordpress 添加文章目录到侧边栏遇到的问题:
    文章是用构建器构建的,文章容器被多层嵌套..?
    <div class="entry-inner">
    <div class="sektion-wrapper nb-loc " data-sek-level="location" data-sek-id="before_content" data-sek-is-global-location="false">
    <div data-sek-level="section" data-sek-id="__nimble__fdfe8afc5daa" class="sek-section sek-has-modules ">
    <div class="sek-container-fluid"><div class="sek-row sek-sektion-inner">
    <div data-sek-level="column" data-sek-id="__nimble__a24b01e49d25" class="sek-column sek-col-base sek-col-100 ">
    <div class="sek-column-inner "><div data-sek-level="module" data-sek-id="__nimble__376e3143b538" data-sek-module-type="czr_tiny_mce_editor_module" class="sek-module ">
    <div class="sek-module-inner">
    <p>111</p>
    <p>2222</p>
    <h2><2333</h2>
    <h2>2344</h2>
    ....

    我换成了自己的目录容器(custom_html-7)和文章容器(sek-module-inner),但获取不到构建器构建的内容。

    原代码如下
    来源:https://www.rainng.com/js-wordpress-catalog/#h2-2

    <(忽略)script>
    /*
    Author: Azure99
    WebSite: https://www.rainng.com/
    GitHub: https://github.com/Azure99
    */

    let catalogData = getArticleCatalog();
    // 自适应文章目录
    if (catalogData != null) {
    // dynamic-wrapper 换成你的目录容器
    let wrapper = document.getElementById('dynamic-wrapper');
    wrapper.innerHTML = generateCatalog(catalogData);
    }

    // 获取本页面的文章目录信息
    function getArticleCatalog() {
    // entry-inner 换成你使用主题的文章容器
    let articleContent = document.getElementsByClassName('entry-inner');
    if (articleContent.length !== 1) {
    return null;
    }

    let catalog = [];
    let header = {};

    let elements = articleContent[0].childNodes;
    // 遍历所有元素
    for (let i = 0; i < elements.length; i++) {
    if (elements[i].nodeName === 'H2') {
    // 为二级标题分配 ID 以供锚点跳转,下同
    elements[i].id = 'h2-' + catalog.length;
    // 记录此二级标题和其所有的三级子标题
    header = {
    name: elements[i].innerText,
    childHeaders: []
    };
    catalog.push(header);

    } else if (elements[i].nodeName === 'H3') {
    elements[i].id = 'h2-' + (catalog.length - 1) + '-h3-' + header.childHeaders.length;
    // 记录此三级标题到二级标题下
    header.childHeaders.push(elements[i].innerText);
    }
    }

    return catalog;
    }

    // 根据目录信息生成文章目录代码
    function generateCatalog(catalogData) {
    let catalog = '<div style="text-align: center; margin-top: 10px;">文章目录</div>';

    for (let i = 0; i < catalogData.length; i++) {
    let target = '#h2-' + i; // 跳转目标
    let index = (i + 1) + '. '; // 标题索引
    let name = catalogData[i].name; // 标题
    catalog += '<a href="' + target + '">' + index + name + '</a><br/>';

    for (let i2 = 0; i2 < catalogData[i].childHeaders.length; i2++) {
    target = '#h2-' + i + '-h3-' + i2;
    index = (i + 1) + '.' + (i2 + 1) + '. ';
    name = catalogData[i].childHeaders[i2];
    catalog += ' <a href="' + target + '">' + index + name + '</a><br/>'
    }
    }

    return catalog;
    }
    <(忽略)/script>
    6 条回复    2021-05-17 20:48:12 +08:00
    siweipancc
        1
    siweipancc  
       2021-05-16 19:26:29 +08:00 via iPhone
    不能 xpath 吗……
    lichdkimba
        2
    lichdkimba  
       2021-05-16 22:15:42 +08:00
    爬虫的话手写 css 太难就 copy selector…………
    vivipure
        3
    vivipure  
       2021-05-17 13:51:52 +08:00
    没太看懂你的问题描述; 原文章自动生成文章目录的逻辑挺清晰的;
    1. 对文章容器中的 h2 和 h3 标签进行处理,加上对应的锚点 ID, 并存储在 catlog 中
    2. 对 catlog 进行遍历生成目录,然后挂载到目录容器中

    这里对 h2,h3 标签进行了处理,如果你无法使用的话,你可以观察下你的文章的 dom 结构
    NjcyNzMzNDQ3
        4
    NjcyNzMzNDQ3  
       2021-05-17 16:15:40 +08:00
    NjcyNzMzNDQ3
        5
    NjcyNzMzNDQ3  
       2021-05-17 16:18:37 +08:00
    ![微信图片_20210517161233.png]( https://i.loli.net/2021/05/17/pTfPmykEJAXa2nV.png)
    LuyeeTom
        6
    LuyeeTom  
    OP
       2021-05-17 20:48:12 +08:00
    @vivipure 前面的代码就是我文章的结构啊。文章的内容都在<div class="sek-module-inner">这,然后我将原代码中的 entry-inner 换成我文章的 sek-module-inner,可是解析不了。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3171 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 12:25 · PVG 20:25 · LAX 05:25 · JFK 08:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.