搜 索

怎样让div按照自己设定好的规则进行排序显示

编辑:QTOOL.NET日期:2019-09-10339

制作网页时,有时候我们需要将div按照自己想要的规则进行指定排序,如何才能实现这样的效果呢?
这里我们需要用到js中的appendChild方法,该方法可以向指定div节点的子节点列表尾部添加新div子节点.
示例如:
<div id="new"></div>
<script type="text/javascript">
var a=document.createTextNode("添加的内容");
 document.getElementById("new").appendChild(a);
</script> 
以上示例就可以实现在指定id为new的元素中插入新的文字内容.
那么需要给div排序则可以使用如下的完整代码
html部分:
<div id="aaa">
  <div class="blist" data-id="1">测试内容1</div>
  <div class="blist" data-id="5">测试内容5</div>
  <div class="blist" data-id="2">第二个元素2</div>
  <div class="blist" data-id="3">第三个元素3</div>
  <div class="blist" data-id="4">测试内容4</div>
</div>
js代码: 
<script type="text/javascript">
    var blist = document.getElementsByClassName('blist');
    var divarr = [];
    for (var i = 0; i < blist.length; i++) {
      divarr.push(blist[i]);
    }
    divarr.sort(function (a, b) {
     
var c = a.getAttribute('data-id') - b.getAttribute('data-id')
 
return c;
 
    });
    for (var i = 0; i < divarr.length; i++) {
 
      document.getElementById("aaa").appendChild(divarr[i]);
 
    }
</script> 
使用js给指定的div标签元素添加指定的属性,然后通过指定的属性进行按照规则排序. 
原理,首先通过获取指定的clss标签以及内容,将其存储到变量divarr中去
通过指定的div属性data-id进行数组元素排序.
循环通过js中自带的appendChild方法或者使用jQuery插件库中的append方法将元素重新插入到指定元素中去.

TAG标签:js
此文章由QTOOL.NET编辑
最新文章

热门标签