如何从 Cheerio/jQuery 中的源标签中检索链接答案

【问题标题】：How to retrieve a link from source tags in Cheerio/jQuery如何从 Cheerio/jQuery 中的源标签中检索链接
【发布时间】：2021-03-29 08:50:33
【问题描述】：

我想尝试检索第一个data-srcset 图像("https://sample.img_1")，到目前为止我的尝试没有成功。我正在 Cheerio 中尝试这个。

我最近的尝试如下 $(".sample_picture [media = '(max-width: 640px)']")，但这并没有输出任何内容。

<picture class="sample_picture">
<source data-srcset="https://sample.img_1" media="(max-width: 640px)">
<source data-srcset="https://sample.img_2" media="(max-width: 1024px)">
<source data-srcset="https://sample.img_2" media="(max-width: 1920px)">

</picture>

【问题讨论】：

我会尝试不那么严格的更简单的选择器.sample_picture [media*="640p"]。如果这不起作用，那么也许你已经破坏了 html 并且源不在图片中。
它没有用，但我 100% 的 html 没有损坏，因为我可以按照源链接进行操作
您提供的样本已损坏，还是我们假设关闭</picture> 标记？当我将它添加到您的 sn-p 时，您的选择器工作正常，$(".sample_picture [media = '(max-width: 640px)']").length 返回 1。问题可能在其他地方。请提供您的代码。
@PeterKA 我现在已经编辑并添加了结束图片标签。我仍然无法使用您提供的选择器提取图片链接。

标签： javascript jquery css-selectors cheerio

【解决方案1】：

你的选择器很好。也许您只需要使用.data() 方法来提取所需的url：

const img1 = $(".sample_picture [media = '(max-width: 640px)']").data('srcset');
console.log( img1 ); //https://sample.img_1

演示

$(function() {
   const img1 = $(".sample_picture [media = '(max-width: 640px)']").data('srcset');
   console.log( img1 );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<picture class="sample_picture">
<source data-srcset="https://sample.img_1" media="(max-width: 640px)">
<source data-srcset="https://sample.img_2" media="(max-width: 1024px)">
<source data-srcset="https://sample.img_2" media="(max-width: 1920px)">

</picture>

【讨论】：