提问人：pinale 提问时间：2/27/2021 最后编辑：Barmarpinale 更新时间：2/27/2021 访问量：278
通过CSS选择器爬升和下降HTML元素
to climb and to descend through html elements via css selector
问：
我有这个荒谬的重复 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>
...
...
...
答：
0赞
Barmar
2/27/2021
#1
用来上升一个级别，下降，并获得下一个兄弟姐妹。把这些放在一起，将 DOM 从 DOM，到它下面的文本 span。.parent().children().next()a
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);
})
0赞
D M
2/27/2021
#2
目前没有 CSS 父选择器。
假设您的文档结构与您发布的内容一致，那么遍历 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>
评论