如何用javascript或jQuery重新排列顯示的html元素順序？

Question

我正在嘗試根據特定div或元素持有的某個值來重新排列項目的順序，例如，以下代碼段

 $(document).ready(function() { $("button").on("click", function() { var spanElemenet = document.getElementsByClassName("rs"); var stringInp = []; var numConv = []; var sorted; for (var counter = 0; counter < spanElemenet.length; counter++) { stringInp[counter] = spanElemenet[counter].innerHTML; } numConv = stringInp.map(Number); for (var i = 1; i < (spanElemenet.length); i++) { for (var j = 0; j < (spanElemenet.length) - 1; j++) { if (numConv[j] > numConv[j + 1]) { sorted = numConv[j]; numConv[j] = numConv[j + 1]; numConv[j + 1] = sorted; } } } //This loop is just to display output of sorted list for(var k = 0; k< spanElemenet.length;k++) { $("#output").append(numConv[k] + "<br>"); } }) }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div class="item">One : <span id="s1" class="rs">400</span></div> <div class="item">Two : <span id="s2" class="rs">1200</span></div> <div class="item">Three : <span id="s3" class="rs">5000</span></div> <div class="item">Four : <span id="s4" class="rs">1096</span></div> <div class="item">Five : <span id="s5" class="rs">99 </span></div> </div> <button>Re order me</button> <div id="output"> </div> 

到現在為止，我已經能夠從HTML中獲取價值並按升序對其進行排序，主要部分是現在根據此順序及其div元素顯示容器內的整個元素。

我期望的O / P是這樣的：

 <div id="container"> <div class="item">Five : <span id="s5" class="rs">99 </span></div> <div class="item">One : <span id="s1" class="rs">400</span></div> <div class="item">Four : <span id="s4" class="rs">1096</span></div> <div class="item">Two : <span id="s2" class="rs">1200</span></div> <div class="item">Three : <span id="s3" class="rs">5000</span></div> </div> <button>Re order me</button> 

Answer 1

要執行您需要的操作，只需要在.item元素上實現自己的sort()邏輯.item ，該邏輯讀取並比較其子.rs元素中的文本。 像這樣：

 $("button").on("click", function() { $('#container .item').sort(function(a, b) { return parseInt($(a).find('.rs').text(), 10) - parseInt($(b).find('.rs').text(), 10); }).appendTo('#container'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div class="item">One : <span id="s1" class="rs">400</span></div> <div class="item">Two : <span id="s2" class="rs">1200</span></div> <div class="item">Three : <span id="s3" class="rs">5000</span></div> <div class="item">Four : <span id="s4" class="rs">1096</span></div> <div class="item">Five : <span id="s5" class="rs">99 </span></div> </div> <button>Re order me</button>