扫码关注官方订阅号
场景:用标签ul和li渲染带有价格的商品列表,要求前端按照价格排序,该如何排序?
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...
处理好数据的排序,在渲染dom不就行了
先把价格取到,然后排好序,循环往li里面插
先处理数据 再渲染DOM
<ul id="ul-list"> <li class="li-item">1</li> <li class="li-item">9</li> <li class="li-item">8</li> <li class="li-item">11</li> <li class="li-item">10</li> </ul> function sortUl (){ var list = document.getElementById("ul-list"); var listArr = document.getElementsByClassName("li-item"); for (var i = 0 ; i < listArr.length ; i ++){ for(var j = 0 ; j < listArr.length - i -1 ; j ++){ if(parseInt(listArr[j].innerHTML) > parseInt(listArr[j+1].innerHTML)){ list.insertBefore(listArr[j+1],listArr[j]); } } } } sortUl ();
var data = [ {"price":100,"data":{"name":"obj1"}}, {"price":200,"data":{"name":"obj2"}}, {"price":300,"data":{"name":"obj3"}}, {"price":400,"data":{"name":"obj4"}}, ]; data.sort(function(a,b){ if(a.price>b.price) return -1; if(a.price<b.price) return 1; if(a.price==b.price) return 0; });
以jquery为例 var goodsArray = $("ul").empty().children("li"); goodsArray.sort(function(a,b){ var priceOld = $(a).data("price");//假设价格就设置的li上面 var priceNew = $(a).data("price"); if(priceOld>priceNew)return -1; if(priceOld<priceNew)return 1; return 0; }).appendTo($("ul"));
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
处理好数据的排序,在渲染dom不就行了
先把价格取到,然后排好序,循环往li里面插
先处理数据 再渲染DOM