具體如何選擇<option>jQuery 中的標簽轉換為 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中，你可以簡單地得到所有的option一個第select元素與jQuery選擇（ $('#attributesize-size_uswomen option')然后執行一個循環（ $.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或value等屬性中。

更新

由於您在 Cheerio 的實現中收到錯誤，它不支持: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>

Answer 2

使用$("select option:not(:first)").each

代碼筆