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

2021-05-16 18:01:06 +08:00
 LuyeeTom
求帮助,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>
1738 次点击
所在节点    JavaScript
6 条回复
siweipancc
2021-05-16 19:26:29 +08:00
不能 xpath 吗……
lichdkimba
2021-05-16 22:15:42 +08:00
爬虫的话手写 css 太难就 copy selector…………
vivipure
2021-05-17 13:51:52 +08:00
没太看懂你的问题描述; 原文章自动生成文章目录的逻辑挺清晰的;
1. 对文章容器中的 h2 和 h3 标签进行处理,加上对应的锚点 ID, 并存储在 catlog 中
2. 对 catlog 进行遍历生成目录,然后挂载到目录容器中

这里对 h2,h3 标签进行了处理,如果你无法使用的话,你可以观察下你的文章的 dom 结构
NjcyNzMzNDQ3
2021-05-17 16:15:40 +08:00
NjcyNzMzNDQ3
2021-05-17 16:18:37 +08:00
![微信图片_20210517161233.png]( https://i.loli.net/2021/05/17/pTfPmykEJAXa2nV.png)
LuyeeTom
2021-05-17 20:48:12 +08:00
@vivipure 前面的代码就是我文章的结构啊。文章的内容都在<div class="sek-module-inner">这,然后我将原代码中的 entry-inner 换成我文章的 sek-module-inner,可是解析不了。。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/777266

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX