如何在Cheerio/jQuery中提取product__sizes-size-1元素值并转为数组？

嘿，我看你在用jQuery的.map()提取尺码文本时遇到了空数组的问题，咱们来一步步排查解决～

问题原因分析 #

你当前的选择器$(".product__sizes-wrapper [data-locale = 'UK']")选中的是整个<ul>元素，而不是你需要的.product__sizes-size-1子元素。当你对这个ul调用.map()时，只会遍历这一个元素，要么返回的是所有尺码拼接的文本（还可能夹杂大量空白），要么如果DOM还没加载完成的话，直接找不到元素导致返回空数组。

解决方案 #

1. 精准定位目标元素

调整选择器，直接选中所有.product__sizes-size-1元素，它们位于带有data-locale='UK'的列表下：

const sizes = $(".product__sizes-wrapper [data-locale='UK'] .product__sizes-size-1")
  .map(function() {
    // 用trim()去除文本可能带的空白字符
    return $(this).text().trim();
  })
  .get();

2. 确保DOM加载完成再执行代码

如果你的代码是在页面DOM还没渲染完毕时运行的，选择器会找不到任何元素，自然返回空数组。把代码放在$(document).ready()回调里，确保DOM就绪后再执行：

$(document).ready(function() {
  const sizes = $(".product__sizes-wrapper [data-locale='UK'] .product__sizes-size-1")
    .map(function() {
      return $(this).text().trim();
    })
    .get();
  console.log(sizes); // 输出: ["6", "7", "8", "9.5"]
});

备选方案：遍历列表项再提取文本

如果你想先遍历每个尺码选项li，再提取里面的文本，也可以这么写：

const sizes = $(".product__sizes-wrapper [data-locale='UK'] .product__sizes-option")
  .map(function() {
    return $(this).find(".product__sizes-size-1").text().trim();
  })
  .get();

这样调整后，就能得到你需要的["6", "7", "8", "9.5"]数组啦～

内容的提问来源于stack exchange，提问作者Scene