如何解决通过 css 选择器爬升和下降通过 html 元素
我有这个荒谬的重复 html 结构(没有类),我需要捕获所有链接和下面的文本。
我可以使用超简单的 css 查询选择器 a
轻松获取所有链接,但我需要捕获放置在链接祖先的同级中的另一个文本(捕获的文本必须与链接一起捕获)。
所以我应该通过 divs 级别然后再下降
关于如何通过 css 选择器爬升和下降的一些建议?
...
...
...
<div> <----first level of div
<div> <----second level of div
<span>
<span>
<div> <----third level of div
<a href=""> <----element that i can get easily
</div>
</span>
</span>
</div>
<div></div>
<div>
<span>
<span>
text to capture <----text i need to capture
</span>
</span>
</div>
<div>
...
...
...
解决方法
使用 .parent()
上升一个级别,使用 .children()
下降,使用 .next()
获得下一个兄弟。将所有这些放在一起以从 a
遍历 DOM 到其下方的文本范围。
let result = $();
$("a").each(function() {
let first_level = $(this).parent().parent().parent().parent();
let sibling = first_level().next().next();
let text_element = sibling.children().children()
result = result.add(this).add(text_element);
})
,
假设您的文档结构与您发布的内容一致,遍历 DOM 就很简单了。
Array.from(document.querySelectorAll('a')).forEach(a => {
let node = a;
for (let i = 0; i < 5; i++) node = node.parentNode;
console.log(a.innerText + ' : ' + node.children[2].children[0].children[0].innerText);
});
<div>
<div>
<span>
<span>
<div>
<a href="">Link 1</a>
</div>
</span>
</span>
</div>
<div></div>
<div>
<span>
<span>
text to capture 1
</span>
</span>
</div>
<div>
<div>
<div>
<span>
<span>
<div>
<a href="">Link 2</a>
</div>
</span>
</span>
</div>
<div></div>
<div>
<span>
<span>
text to capture 2
</span>
</span>
</div>
<div>
<div>
<div>
<span>
<span>
<div>
<a href="">Link 3</a>
</div>
</span>
</span>
</div>
<div></div>
<div>
<span>
<span>
text to capture 3
</span>
</span>
</div>
<div>
<div>
<div>
<span>
<span>
<div>
<a href="">Link 4</a>
</div>
</span>
</span>
</div>
<div></div>
<div>
<span>
<span>
text to capture 4
</span>
</span>
</div>
<div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。