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

Question

我試圖重新安排基於某個值時特別股利或元素，例如持有此項目的順序如下片段

$(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我是xpecting會是這樣：

<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

要做到你需要什麼，你只需要實現自己的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>