通过 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);
})

,

目前有 no CSS parent selector。

假设您的文档结构与您发布的内容一致，遍历 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>