Question

我目前使用以下jQuery集合/对象：

[li.row-0, li.row-1, li.row-2, li-row-2, li.row-2, li.row-3]

通过以前的方法将每个类名动态添加到每个元素。类名的唯一一致部分是row-。数字可以是0 - ∞。

我想创建一个新的数组或元素对象，这些元素按相同的动态类名称分组：

[li.row-0]
[li.row-1]
[li.row-2, li.row-2, li.row-2, li.row-2]
[li.row-3]

以上只是对结果的猜测，因为我并不是100％确定如何最好地实现这一目标。

目的是能够遍历.row-0, .row-1, .row-2, .row-3并对每一行中的元素做一些事情。

Answer 1

我会这样做：

var map = [].reduce.call(arr, function(map, v){
     (map[v.className]||(map[v.className]=[])).push(v);
     return map;
}, {});
var arr2 = [];
for (var className in map)  arr2.push(map[className]);

reduce构建一个地图，其中包含类名的键和值，以及具有该类名的元素的数组。

我使用[].reduce.call(arr,代替arr.reduce(，以便它适用于标准数组，jQuery集合，节点列表等。

然后循环从该映射构建一个数组。您可能会发现地图比最终数组更有用。

Answer 2

这向您展示了实现这一目标的一般方法，尽管您可能使用的是元素而不是字符串，但希望这会有所帮助

var tst = ['li.row-0','li.row-1','li.row-2','li.row-2','li.row-2','li.row-3'];
var grouped = [];
for(var i in tst)
{
    var text = tst[i];
    var num = text.replace('li.row-','');
    if(!grouped[num]) grouped[num] = [];
    grouped[num].push(text);
}
console.log(grouped);//[["li.row-0"], ["li.row-1"], ["li.row-2", "li.row-2", "li.row-2"], ["li.row-3"]]

使用元素：

var tst = [li.row-0,li.row-1,li.row-2,li.row-2,li.row-2,li.row-3];
var grouped = [];
for(var i in tst)
{
    var text = tst[i].className;
    var num = text.replace('row-','');
    if(!grouped[num]) grouped[num] = [];
    grouped[num].push(text);
}
console.log(grouped);//[["li.row-0"], ["li.row-1"], ["li.row-2", "li.row-2", "li.row-2"], ["li.row-3"]]

此方法更详细，如果需要，可以允许更复杂的分组（如果其他属性发挥作用）

Answer 3

我会做以下事情：

var arr = ['li.row-0', 'li.row-1', 'li.row-2', 'li.row-2', 'li.row-2', 'li.row-3'];
var result = {};
$.each(arr, function (index, item) {
    var ind = item.toString().split('row-')[1];
    (result[ind] || (result[ind] = [])).push(item);
});
console.log(result);

使用相同的动态类创建元素的数组或对象

3 个答案: