如何在这个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类中的每个锚="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();