Cheerio 中的选择器答案

【问题标题】：Selector in cheerioCheerio 中的选择器
【发布时间】：2021-09-25 17:14:48
【问题描述】：

到目前为止我有这个

const info = $('[data-style-name="Black"]').parent('li').html()
console.log(info)

它会记录以下 html

<button data-url="/shop/jackets/ls0jgz4q1/t3i0gnxc9" 
    class="" 
    data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204642/ma/7P9KTS4_HEs.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204642/zo/7P9KTS4_HEs.jpg&quot;}" 
    data-style-name="Black" 
    data-style-id="30985" 
    data-sold-out="false" 
    data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "
>
    <img width="32" height="32" alt="Black" src="//assets.supremenewyork.com/204642/sw/7P9KTS4_HEs.jpg">
</button>
<button data-url="/shop/jackets/ls0jgz4q1/t3i0gnxc9?alt=0" 
    class="" 
    data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204644/ma/ndcje1Lw83w.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204644/zo/ndcje1Lw83w.jpg&quot;}" 
    data-style-name="Black" 
    data-style-id="30985" 
    data-sold-out="false" 
    data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and 
back neck tab. "
>
    <img width="32" height="32" alt="Black image 1" src="//assets.supremenewyork.com/204644/sw/ndcje1Lw83w.jpg">
</button>
<button data-url="/shop/jackets/ls0jgz4q1/t3i0gnxc9?alt=1" 
    class="" 
    data-images="{&quot;detail_url&quot;:&quot;//assets.supremenewyork.com/204645/ma/FUYxiNKaZ94.jpg&quot;,&quot;zoomed_url&quot;:&quot;//assets.supremenewyork.com/204645/zo/FUYxiNKaZ94.jpg&quot;}" 
    data-style-name="Black" 
    data-style-id="30985" 
    data-sold-out="false" 
    data-description="Water resistant cotton with full zip closure and hidden snap placket. Velcro flap mesh hand pockets at lower front with dual top and side entry. Interior elastic shockcord at fixed hood and hem with velcro tab adjusters at cuffs. Woven logo labels at left pocket and back neck tab. "
>
    <img width="32" height="32" alt="Black image 2" src="//assets.supremenewyork.com/204645/sw/FUYxiNKaZ94.jpg">
</button>

如何获取“data-style-id”的值

【问题讨论】：

你想要data-style-id的三个元素是哪一个？
它们都具有相同的值，所以没关系

标签： javascript html node.js web-scraping cheerio

【解决方案1】：

您可以使用它来访问每个匹配元素的data-style-id 属性：

$('li > [data-style-name="Black"]').each((index, element) => {
    console.log($(element).attr("data-style-id"));
});

如果你只想要第一个的值，你可以使用这个：

let value = $('li > [data-style-name="Black"]').eq(0).attr("data-style-id");
console.log(value);

【讨论】：