javascript - Apply complicated li to descending order with jQuery -
in demo below, orders li's according text.
http://codepen.io/anon/pen/byerqd
<abbr id="arti173" class="butarti">8</abbr> i want order li's according text in abbr.
i appreciate help. i've been working on lately , stuck.
html
<body> <input type="button" id="test" value="sort list (click again reverse)" /> <ul id="list"> <li>peter<div class="yordivu"> <div> <img> </div> <div> <button id="likefuncid173" class="likebutx mybutton" onclick="likefunc(173,1,'abbr#arti173')"><abbr id="arti173" class="butarti">6</abbr><span class="fa fa-thumbs-up"></span></button><button id="unlikefuncid173" class="mybutton" onclick="unlikefunc(173,1,'abbr#eksi173')"><abbr id="eksi173" class="buteksi">2</abbr><span class="fa fa-thumbs-down"></span></button> </div> </div> <div style="word-wrap: break-word;"> <div><h3 class="yornameh"></h3><span class="text-muted"><strong></strong></span></div> <div class="yortext"> </div> </div></li> <li>mary<div class="yordivu"> <div> <img> </div> <div> <button id="likefuncid173" class="likebutx mybutton" onclick="likefunc(173,1,'abbr#arti173')"><abbr id="arti173" class="butarti">8</abbr><span class="fa fa-thumbs-up"></span></button><button id="unlikefuncid173" class="mybutton" onclick="unlikefunc(173,1,'abbr#eksi173')"><abbr id="eksi173" class="buteksi">3</abbr><span class="fa fa-thumbs-down"></span></button> </div> </div> <div style="word-wrap: break-word;"> <div><h3 class="yornameh"></h3><span class="text-muted"><strong></strong></span></div> <div class="yortext"> </div> </div></li> <li>paul<div class="yordivu"> <div> <img> </div> <div> <button id="likefuncid173" class="likebutx mybutton" onclick="likefunc(173,1,'abbr#arti173')"><abbr id="arti173" class="butarti">5</abbr><span class="fa fa-thumbs-up"></span></button><button id="unlikefuncid173" class="mybutton" onclick="unlikefunc(173,1,'abbr#eksi173')"><abbr id="eksi173" class="buteksi">0</abbr><span class="fa fa-thumbs-down"></span></button> </div> </div> <div style="word-wrap: break-word;"> <div><h3 class="yornameh"></h3><span class="text-muted"><strong></strong></span></div> <div class="yortext"> </div> </div></li> <li>allen<div class="yordivu"> <div> <img> </div> <div> <button id="likefuncid173" class="likebutx mybutton" onclick="likefunc(173,1,'abbr#arti173')"><abbr id="arti173" class="butarti">1</abbr><span class="fa fa-thumbs-up"></span></button><button id="unlikefuncid173" class="mybutton" onclick="unlikefunc(173,1,'abbr#eksi173')"><abbr id="eksi173" class="buteksi">10</abbr><span class="fa fa-thumbs-down"></span></button> </div> </div> <div style="word-wrap: break-word;"> <div><h3 class="yornameh"></h3><span class="text-muted"><strong></strong></span></div> <div class="yortext"> </div> </div></li> </ul> </body> javascript
function sortunorderedlist(ul, sortdescending) { if (typeof ul == "string") ul = document.getelementbyid(ul); var lis = ul.getelementsbytagname("li"); var vals = []; (var = 0, l = lis.length; < l; i++) vals.push(lis[i].innerhtml); vals.sort(); if (sortdescending) vals.reverse(); (var = 0, l = lis.length; < l; i++) lis[i].innerhtml = vals[i]; } window.onload = function() { var desc = false; document.getelementbyid("test").onclick = function() { sortunorderedlist("list", desc); desc = !desc; return false; } }
first of all, there should not more 1 id value in document. kind of querying on fail then.
coming issue, can insert text inside abbr in array sorted along li , sort based on text. keeping in mind, change code -
for (var = 0, l = lis.length; < l; i++) { // pushing array text second field vals.push([lis[i].innerhtml, lis[i].getelementsbyclassname("butarti")[0].innerhtml]); } // sorting final based on text vals.sort(function(a,b){return parseint(a[1]) - parseint(b[1])}); if (sortdescending) vals.reverse(); // replacing existing li tags html (var = 0, l = lis.length; < l; i++) lis[i].innerhtml = vals[i][0]; hope works.
Comments
Post a Comment