cheerio 中的选择器

Question

到目前为止我有这个

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”的值

Answer 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);

cheerio 中的选择器

Selector in cheerio

javascript

html

node.js

web-scraping

cheerio