在下面的演示中，使用jQuery

將降序複雜的li應用於降序中，它根據文本命令li。在下面的演示中，使用jQuery

<abbr id="arti173" class="butarti">8</abbr>

我要訂購李時珍根據縮寫的文本。

我真的很感謝你的幫助。最近我一直在努力，並被卡住了。

HTML

<body> 
     <input type="button" id="test" value="Sort List (click again to 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 = []; 
      for (var i = 0, l = lis.length; i < l; i++) 
      vals.push(lis[i].innerHTML); 
      vals.sort(); 

      if (sortDescending) vals.reverse(); 

      for (var i = 0, l = lis.length; i < 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; 
      } 
     }

來源

2015-04-01 FF Cam

首先，不應該有一個文檔中的多個id值。那麼任何一種查詢都會失敗。

即將到來的問題，您可以將abbr中的文本插入到您的數組中，與li一起排序，然後根據文本進行排序。牢記這一點，將您的代碼更改爲此 -

for (var i = 0, l = lis.length; i < l; i++) 
{ 
    // pushing an array with text as second field 
    vals.push([lis[i].innerHTML, lis[i].getElementsByClassName("butarti")[0].innerHTML]); 
} 

// sorting the final based on text 
vals.sort(function(a,b){return parseInt(a[1]) - parseInt(b[1])}); 

if (sortDescending) vals.reverse(); 

// replacing the existing li tags html 
for (var i = 0, l = lis.length; i < l; i++) 
    lis[i].innerHTML = vals[i][0];

希望這能奏效。

來源

2015-04-01 18:16:28 Sam

它工作。謝謝！ – 2015-04-01 19:19:12

很高興幫助。 – Sam 2015-04-01 19:21:50

在下面的演示中，使用jQuery

回答

相關問題