您的位置:首页 > Web前端 > HTML

用jq将html元素根据属性中的数据分组

2016-03-28 10:22 330 查看
在编程过程中,有时候会对页面遍历出来的元素根据某个参数进行分组排序,下面展示如何分组:

比如遍历出来的元素如下:

<div id="col">

  <div flag="1">1</div>

  <div flag="3">3</div>

  <div flag="3">3</div>

  <div flag="2">2</div>

  <div flag="1">1</div>

  <div flag="3">3</div>

</div>

<div id="test"></div>

想要根据flag中的数字,按照1,1,2,3,3,3分组显示,结果为

  <div flag="1">1</div>

  <div flag="1">1</div>

  <div flag="2">2</div>

  <div flag="3">3</div>

  <div flag="3">3</div>

  <div flag="3">3</div>

可以做如下处理

jq:

var div =
$("[flag]");//获取所有属性中有flag的元素

var table =
{};

var len = div.length;

for (var i
= 0; i <
len; i++) {

  if
(table[$(div[i]).attr("flag")]
== undefined) {

    var
list =
[];

    list.push(div[i]);

    table[$(div[i]).attr("flag")]
= list;

  } else {

    table[$(div[i]).attr("flag")].push(div[i]);//将需要的元素添加进table

  }

8fb7
}

for(param in
table){

  $("#test").append($(table[param]).clone());//拼接到需要的元素上

}

注意:如果append的时候不用clone方法的话,会将原来的记录覆盖
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  jq js 分组 html 遍历