javascript - 如何在 jQuery 中选择特定的 <option> 标签以转换为 Javascript 对象

Question

我想获取第一个<option>下面的信息标签，我想使用 jQuery/Cheerio 来提取信息并将最终结果转换为字典。理想情况下它看起来像这样

const info = {
   '5.5':12773,
   '6':12774,
}

一切都会持续到最后。

<select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select">
  <option>Choose Your Size</option>
  <option value="12773" source="16004">5.5</option>
  <option value="12774" source="16006">6</option>
  <option value="12775" source="16008">6.5</option>
  <option value="14805" source="16010">7</option>
  <option value="14809" source="16012">7.5</option>
  <option value="12749" source="16014">8</option>
  <option value="14816" source="16016">8.5</option>
  <option value="14820" source="16018">9</option>
  <option value="14824" source="16020">9.5</option>
  <option value="15175" source="16022">10</option>
  <option value="15178" source="16024">10.5</option>
  <option value="15184" source="16028">11.5</option>
  <option value="15187" source="16030">12</option>
</select>

Answer 1

好吧，如果您想在 jQuery 中完成所有这些操作，您只需使用 jQuery 选择器即可获取 select 元素的所有 option ($('#attributesize-size_uswomen option'))，然后对其执行 for 循环( $.each ) 并轻松填充您的对象。

所以你的最终代码应该是这样的:

var opts = $('#attributesize-size_uswomen option:not(:first)');
var info = {};

$.each(opts, function(index, opt) {
   info[$(opt).text()] = parseInt($(opt).val())
});

console.log(info);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select">
  <option>Choose Your Size</option>
  <option value="12773" source="16004">5.5</option>
  <option value="12774" source="16006">6</option>
  <option value="12775" source="16008">6.5</option>
  <option value="14805" source="16010">7</option>
  <option value="14809" source="16012">7.5</option>
  <option value="12749" source="16014">8</option>
  <option value="14816" source="16016">8.5</option>
  <option value="14820" source="16018">9</option>
  <option value="14824" source="16020">9.5</option>
  <option value="15175" source="16022">10</option>
  <option value="15178" source="16024">10.5</option>
  <option value="15184" source="16028">11.5</option>
  <option value="15187" source="16030">12</option>
</select>

注意:由于循环中的 opt 本身将是一个常规对象，要在其上使用 jQuery 函数，因此您需要使用 $ 创建一个 jQuery 对象() 操作数，否则您可以将其用作常规 NODE 对象，并使用 javascript 内置属性获取其属性，如 text , textContent或值。

更新

由于您在使用 Cheerio 实现时收到错误，does not support :first伪选择器，因此您可以选择所有选项，然后在对象创建中排除第一个选项。

var opts = $('#attributesize-size_uswomen option');
var info = {};

$.each(opts, function(index, opt) {
  if (index != 0)
    info[$(opt).text()] = parseInt($(opt).val())
});

console.log(info);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select">
  <option>Choose Your Size</option>
  <option value="12773" source="16004">5.5</option>
  <option value="12774" source="16006">6</option>
  <option value="12775" source="16008">6.5</option>
  <option value="14805" source="16010">7</option>
  <option value="14809" source="16012">7.5</option>
  <option value="12749" source="16014">8</option>
  <option value="14816" source="16016">8.5</option>
  <option value="14820" source="16018">9</option>
  <option value="14824" source="16020">9.5</option>
  <option value="15175" source="16022">10</option>
  <option value="15178" source="16024">10.5</option>
  <option value="15184" source="16028">11.5</option>
  <option value="15187" source="16030">12</option>
</select>

或者，如果您想跟上受支持的 Cheerio 方法，请使用以下方法:

var info = {};

$('#attributesize-size_uswomen').children().slice(1).each(function() {
  info[$(this).text()] = parseInt($(this).val())
});

console.log(info);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="size_attribute[size]" id="attributesize-size_uswomen" class="size-attribute-select">
  <option>Choose Your Size</option>
  <option value="12773" source="16004">5.5</option>
  <option value="12774" source="16006">6</option>
  <option value="12775" source="16008">6.5</option>
  <option value="14805" source="16010">7</option>
  <option value="14809" source="16012">7.5</option>
  <option value="12749" source="16014">8</option>
  <option value="14816" source="16016">8.5</option>
  <option value="14820" source="16018">9</option>
  <option value="14824" source="16020">9.5</option>
  <option value="15175" source="16022">10</option>
  <option value="15178" source="16024">10.5</option>
  <option value="15184" source="16028">11.5</option>
  <option value="15187" source="16030">12</option>
</select>