如何从 Cheerio/jQuery 中的 li 元素中选择值？答案

【问题标题】：How to select values from li elements in Cheerio/jQuery?如何从 Cheerio/jQuery 中的 li 元素中选择值？
【发布时间】：2020-12-18 22:08:03
【问题描述】：

<div class="tabs__content tabs__content--bg js-tab-panel">
<div class="tabs__panel tabs__panel--active">
   <div class="product__sizes-wrapper">
      <ul class="product__sizes-select js-size-select-list" data-locale="UK">
         <li class="product__sizes-option" data-msg="Sample Message" data-name="6"  data-value="060">
            <span class="product__sizes-size">
            <span class="product__sizes-size-1">6</span>
            <span class="product__sizes-size-2"></span>
            </span>
         </li>
         <li class="product__sizes-option" data-msg="Sample Message" data-name="7"  data-value="070">
            <span class="product__sizes-size">
            <span class="product__sizes-size-1">7</span>
            <span class="product__sizes-size-2"></span>
            </span>
         </li>
         <li class="product__sizes-option" data-msg="Sample Message" data-name="8"  data-value="080">
            <span class="product__sizes-size">
            <span class="product__sizes-size-1">8</span>
            <span class="product__sizes-size-2"></span>
            </span>
         </li>
         <li class="product__sizes-option" data-msg="Sample Message" data-name="9.5"  data-value="095">
            <span class="product__sizes-size">
            <span class="product__sizes-size-1">9.5</span>
            <span class="product__sizes-size-2"></span>
            </span>
         </li>
      </ul>
   </div>
</div>

我想从product__sizes-size-1 类中提取值并将它们转换为一个数组。我尝试使用 .map() 函数尝试填充数组，但它显示为空。为了清楚起见，我希望像 [6,7,8,9.5] 等那样填充数组...

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

【问题讨论】：

向我们展示您的尝试。请记住，您没有价值。您有数据属性，其中一个具有值键。它们不是一回事。
展示了我的尝试
Err，带有data-locale的元素是ul，只有一个。你到底想列出什么？
product__sizes-size-1 (9.5,8,7) 等类的数据值
所以改变你的选择器来找到那些家伙。如果要映射到子元素列表，则不能在父元素上停止选择器。找到孩子并绘制他们的地图。 $(".product__sizes-wrapper [data-locale = 'UK'] .product__sizes-size-1").map(...)

标签： javascript html jquery css cheerio

【解决方案1】：

您的方法是正确的，您只是使用了错误的选择器。请改用product__sizes-size-1：

$(document).ready(function(){
    var sizes = $('.product__sizes-size-1').map(function(){return $(this).text()}).get();
});

【讨论】：

【解决方案2】：

选择它 $('#product__sizes-select li.product__sizes-size-1');

在数组中

var product_sizes = [];
$('ul').each(function() {
    var localproduct_sizes = [];
    $(this).find('li').each(function(){
        localproduct_sizes.push( $(this).attr('product__sizes-size-1') );
    });
    product_sizes.push(localproduct_sizes);
});

【讨论】：

数组中的每个值都未定义