Question

我在页面上有许多数据属性，它们具有不同的值，但这些值会有重复，例如：

<div data-user-val="[Adult-Young-25]"></div>
<div data-user-val="[Adult-Young-25]"></div>
<div data-user-val="[Adult-Young-25]"></div>
<div data-user-val="[Adult-Mid-35]"></div>
<div data-user-val="[Adult-Mid-35]"></div>
<div data-user-val="[Adult-Old-75]"></div>

我想循环并抓住每个独特的价值（＆＃39; [成人 - 年轻25]＆＃39; [成人 - 中35]＆＃39;＆＃39; [Adult-Old-75]＆＃39;）并将它们拆分为传递给数组的键值对，如：

var array = {"Adult Young": "25", "Adult Mid": "35", "Adult Old": "75"};

我正在努力争取1.抓住每个重复数据值的一个实例，然后2.分享＆＃39;分裂＆＃39;映射为键值对的值。

Answer 1

＆＃13;

var obj = {};

$('div').each(function(){
  var data_attrivute_value = $(this).data('user-val');
  data_attrivute_value = data_attrivute_value.substring(1,data_attrivute_value.lastIndexOf("]"));
  var exploded_string = data_attrivute_value.split('-');
  obj[exploded_string[0]+' '+exploded_string[1]] = exploded_string[2];
});

console.log(obj);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-user-val="[Adult-Young-25]"></div>
<div data-user-val="[Adult-Young-25]"></div>
<div data-user-val="[Adult-Young-25]"></div>
<div data-user-val="[Adult-Mid-35]"></div>
<div data-user-val="[Adult-Mid-35]"></div>
<div data-user-val="[Adult-Old-75]"></div>

＆＃13;

Answer 2

使用document.querySelectorAll()获取具有data-user-val属性的所有元素，并传播到数组。使用Array.reduce()迭代数组，并获取属性的值。使用String.match()获取值的非数字（键）和数字（值）部分。将键和值分配给对象。

const result = [...document.querySelectorAll('[data-user-val]')]
  .reduce((r, el) => {
    const [, k, v] = el.getAttribute('data-user-val').match(/([^\d\[]+)(\d+)/);
    
    r[k.replace(/-/g, ' ').trim()] = v;
    
    return r;
  }, {});
  
console.log(result);

<div data-user-val="[Adult-Young-25]"></div>
<div data-user-val="[Adult-Young-25]"></div>
<div data-user-val="[Adult-Young-25]"></div>
<div data-user-val="[Adult-Mid-35]"></div>
<div data-user-val="[Adult-Mid-35]"></div>
<div data-user-val="[Adult-Old-75]"></div>

Answer 3

这是一个没有任何花哨的库或函数的简单解决方案：

"This is the value of context.frais: $frais ."

获取唯一的数据属性值并从这些值创建键值数组？

3 个答案: