技术解析

JS 如何获取多层嵌套的 Class 元素?
0
2021-08-09 21:21:35
idczone
求帮助,Wordpress 添加文章目录到侧边栏遇到的问题:
文章是用构建器构建的,文章容器被多层嵌套..?







111


2222


<2333


2344


....

我换成了自己的目录容器(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 = '
文章目录
';

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

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 += ' ' + index + name + '
'
}
}

return catalog;
}
<(忽略)/script>
不能 xpath 吗……

爬虫的话手写 css 太难就 copy selector…………

没太看懂你的问题描述; 原文章自动生成文章目录的逻辑挺清晰的;
1. 对文章容器中的 h2 和 h3 标签进行处理,加上对应的锚点 ID, 并存储在 catlog 中
2. 对 catlog 进行遍历生成目录,然后挂载到目录容器中
这里对 h2,h3 标签进行了处理,如果你无法使用的话,你可以观察下你的文章的 dom 结构

https://sm.ms/image/pTfPmykEJAXa2nV

![微信图片_20210517161233.png]( https://i.loli.net/2021/05/17/pTfPmykEJAXa2nV.png)

前面的代码就是我文章的结构啊。文章的内容都在
这,然后我将原代码中的 entry-inner 换成我文章的 sek-module-inner,可是解析不了。。

数据地带为您的网站提供全球顶级IDC资源