如何为这个 HTML 使用 CHEERIO.js？

Question

<div class="A">
<section class="B" data-vr-zone="B">
    <header class="C"> BarFoo</header>
    <ul class="list">
        <li data-vr-contentbox=""> 
            <a href="http://www.foobar.com/.../html">
                <small>BarBar</small> 
                <span>Foo Bar foobarbar FooFoo?</span>
            </a>

        </li>
        <li data-vr-contentbox=""> 
            <a href="http://www.foofoobar.com/.../html">
                <small>BarBarBar</small> 
                <span>Foo foo FooFoo?</span>
            </a>

        </li>

我想访问 HREF 属性中的 url。而 SPAN 中的文本——仅属于第一个列表项。

我有什么工作，但我正在寻找更好的方法。

var url = $('div .A').children().children().children().children()[0].attribs.href;

var title = $('div .A').children().children().children().children()[0].children[2].children[0].data;

Answer 1

您想使用更好的选择器字符串来定位感兴趣的元素和属性。你到底有多模糊或精确涉及到与 DOM 结构耦合太紧密的权衡，因此对 HTML 的一些不相关的更改意味着你的选择器不再匹配，或者使用太模糊的选择器并匹配比你想要的更多的东西。

• 模糊：'a'（找到每个锚点）
• '.A a'（div 内的每个锚点 class="A"）
• 推荐：'.A li a'（必须是列表的一部分）
• 疯狂具体：'div.A section.B ul.list li a'

.

var link = $('.A li a');
var href = link.attr('href');
var spanText = link.find('span').first().text();