从数据属性获取值到数组

Question

我试图在提交时从不同的div的data属性（data-price）中获取值，并将其放入数组中，但无法正常工作

var item_arr = new Array();

$('input[name^="item_price"]').each(function() {
  var MyVar = $(this).data('price');
  alert(MyVar);
  item_arr.push(MyVar);
});

console.log(item_arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo-3" name="item_price[]" data-price="150"></div>
<div id="demo-4" name="item_price[]" data-price="175"> </div>
<div id="demo-5" name="item_price[]" data-price="125"> </div>

我希望输出为item_arr = ["150","175","125"]，目前它只是返回一个空数组

Answer 1

您的主要问题是选择器：input[name^="item_price"]

您有input而不是div，因为您的元素标记的类型为<div>。

将其更改为：div[name^="item_price"]

---

替代jQuery方法

您可以映射每个元素的数据值并返回一个本机数组。

/** jQuery plugin */
(($) => {
  /**
   * Returns an array of data values for the selected elements.
   * @param {string} dataKey the data attribute key
   * @param {function} convertFn a post-processing function to convert the raw value
   * @return return an array of processed data values
   */
  $.fn.dataArray = function(dataKey, convertFn) {
    return this.map((i, el) => ((v) => convertFn ? convertFn(v) : v)($(el).data(dataKey))).toArray();
  }
})(jQuery);

console.log($('div[name^="item_price"]').dataArray('price', parseInt));

.as-console-wrapper { top: 0; max-height: 100% !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo-3" name="item_price[]" data-price="150"></div>
<div id="demo-4" name="item_price[]" data-price="175"> </div>
<div id="demo-5" name="item_price[]" data-price="125"> </div>

Answer 2

只需将input[name^="item_price"]更改为div[name^="item_price[]"]。 参见下面的工作代码-

var item_arr = new Array();

$('div[name="item_price[]"]').each(function() {
  var MyVar = $(this).data('price');
  item_arr.push(MyVar);
});

console.log(item_arr);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo-3" name="item_price[]" data-price="150"></div>
<div id="demo-4" name="item_price[]" data-price="175"> </div>
<div id="demo-5" name="item_price[]" data-price="125"> </div>