在 Google 上搜索了一下,但无法解决如何处理这个问题。
我有/计划一个项目 list 。
var list1 = [
[141,'AAA', 'A Group'],
[262,'BBB', 'B Group'],
[345,'CCC', 'B Group'],
[136,'DDD'],
[095,'EEE', 'A Group'],
[175,'FFF'], and so on...
];
我的目标是打印这些项目。 首先分组,按字母顺序排列。之后没有分组。
所有项目按字母顺序排列。
最终结果是这样的:
<div>
<h2>A Group</h2>
<ul class="group">
<li>
<img src="/141">
<h3>AAA</h3>
</li>
<li>
<img src="/095">
<h3>EEE</h3>
</li>
</ul>
<h2>B Group</h2>
<ul class="group">
<li>
<img src="/262">
<h3>BBB</h3>
</li>
<li>
<img src="/345">
<h3>CCC</h3>
</li>
</ul>
<h2>No group</h2>
<ul class="non-group">
<li>
<img src="/136">
<h3>DDD</h3>
</li>
<li>
<img src="/175">
<h3>FFF</h3>
</li>
</ul>
</div>
对如何解决这个问题有什么想法吗?
找到这个,https://stackoverflow.com/a/7596924/543365
非常接近我可以使用的。虽然无法将其弯曲以供我使用。
最佳答案
我建议查看 underscorejs,但是,如果您想使用纯 javascript:
1.) 对列表进行排序,使组中的项目排在第一位。
var i = 0,
group_arr = [];
for (i = 0; i < list1.length; i++) {
if (list1[i][2] !== undefined) {
group_arr.append(list1.splice(i, 1)[0]);
}
}
2.) 现在所有带组的项目都在 group_arr
中,没有组的项目在 list1
中。我们现在需要对 group_arr
进行排序,使其按组的字母顺序排列:
group_arr.sort(function (item1, item2) {
return (item1[2] > item2[2]) ? 1 : -1;
});
请注意,我们可以根据任意条件对 group_arr
进行排序。如果您想按第二个条目的字母顺序排序,只需在传递给 Array.prototype.sort
的比较器函数中对其进行索引即可。
3.) 现在 group_arr
中的项目按组按字母顺序排列,并且包含具有组的项目。 list 1
中的项目没有分组,也没有排序。您现在可以遍历每个数组,创建您的 DOM 元素,然后插入它们。
关于javascript - 如何使用 js 数组,查找和分组项目?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15495059/