Question

我在DIV中具有以下跨度

<div class="itens">
  <span data-type="car" data-value="1"></span>
  <span data-type="car" data-value="2"></span>
  <span data-type="car" data-value="3"></span>

  <span data-type="bus" data-value="1"></span>
  <span data-type="bus" data-value="2"></span>

  <span data-type="airplane" data-value="1"></span>
</div>

我需要遍历跨度并按类型分组。最后，我需要像这样的哈希

{
  car: [1,2,3],
  bus: [1, 2],
  airplane: [1]
}

我尝试了一些代码片段，但无法解决。谢谢。

Answer 1

您可以对每种数据类型使用jQuery [attribute=value]选择器，然后使用.each进行迭代。

const store = {
    car: [],
    bus: [],
    airplane: [],
};

$("[data-type='car']").each(function() {
    store.car.push(this.getAttribute('data-value'));
});
$("[data-type='bus']").each(function() {
    store.bus.push(this.getAttribute('data-value'));
});
$("[data-type='airplane']").each(function() {
    store.airplane.push(this.getAttribute('data-value'));
});

对于更一般的情况，我们要在发现还没有类型的类型时初始化数组。

const store = {};

$(".items span").each(function() {
    let dataType = this.getAttribute('data-type');
    //see if the array for the type has been defined yet
    if(!store.hasOwnProperty(dataType)) {
        store[dataType] = [];
    }
    store[dataType].push(this.getAttribute('data-value'));
});

Answer 2

尝试使用此Javascript代码-

var resultArr = new Object();
$('div.itens span').each(function(key, val){
    var typeVal =  $(val).attr('data-type');
  var value = $(val).attr('data-value');
    if(resultArr.hasOwnProperty(typeVal)){
    resultArr[typeVal].push(value);
  }
  else{
    resultArr[typeVal] = [value];
  }
});

jQuery分组范围

2 个答案: