如何獲取SORT數組返回的完整HTML表數據？

Question

我有以下代碼調用OBJECT添加+10然后在返回時對結果進行排序：

bbb 20
ccc 13
aaa 11
ddd 10

這是正確的排序，值是正確的。 但是，我需要根據代碼段將完整表包含在這些結果中。

 <div class="box"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="25%" bgcolor="#CCFF99">b</td> <td width="25%" bgcolor="#CCFF99">b</td> <td width="25%" bgcolor="#CCFF99">b</td> <td width="25%" bgcolor="#CCFF99">20</td> </tr> </table> </div> <div class="box"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="25%" bgcolor="#FF9933">c</td> <td width="25%" bgcolor="#FF9933">c</td> <td width="25%" bgcolor="#FF9933">c</td> <td width="25%" bgcolor="#FF9933">13</td> </tr> </table> </div> <div class="box"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="25%" bgcolor="#99CC66">a</td> <td width="25%" bgcolor="#99CC66">a</td> <td width="25%" bgcolor="#99CC66">a</td> <td width="25%" bgcolor="#99CC66">11</td> </tr> </table> </div> <div class="box"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="25%" bgcolor="#CCCC99">d</td> <td width="25%" bgcolor="#CCCC99">d</td> <td width="25%" bgcolor="#CCCC99">d</td> <td width="25%" bgcolor="#CCCC99">10</td> </tr> </table> </div> 

如何獲取SORT數組返回的完整HTML表數據？ 也許還有更好的方法嗎？

<!--HTML ===-->

<div id="containerSort">
  <!--HTML-->
  <div class="box">

    <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="25%" bgcolor="#99CC66">a</td>
    <td width="25%" bgcolor="#99CC66">a</td>
    <td width="25%" bgcolor="#99CC66">a</td>
    <td width="25%" bgcolor="#99CC66"><object>001</object></td>
  </tr>
</table>

  </div>
  <div class="box">

        <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="25%" bgcolor="#CCFF99">b</td>
    <td width="25%" bgcolor="#CCFF99">b</td>
    <td width="25%" bgcolor="#CCFF99">b</td>
    <td width="25%" bgcolor="#CCFF99"><object>10</object></td>
  </tr>
</table>
  </div>
  <div class="box">

        <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="25%" bgcolor="#FF9933">c</td>
    <td width="25%" bgcolor="#FF9933">c</td>
    <td width="25%" bgcolor="#FF9933">c</td>
    <td width="25%" bgcolor="#FF9933"><object>03</object></td>
  </tr>
</table>
  </div>
  <div class="box">

        <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="25%" bgcolor="#CCCC99">d</td>
    <td width="25%" bgcolor="#CCCC99">d</td>
    <td width="25%" bgcolor="#CCCC99">d</td>
    <td width="25%" bgcolor="#CCCC99"><object>0</object></td>
  </tr>
</table>
  </div>
<div id="increase"></div>

</div>

    <script type='text/javascript'>

    $(document).ready(function() {
    $("#increase").trigger("click");
});

// Assign function as eventListener
$("#increase").click(computeAndUpdateValue);

// Wrapper function
function computeAndUpdateValue() {
    var valArr = getValues();
    valArr = addNumber(valArr);
    valArr = sortValues(valArr);
    createAndRenderHTML(valArr, "#containerSort");
}

function getValues() {
    var returnArray = [];
    $("div.box").each(function(id, el) {
        returnArray.push($(el));
    });
    return returnArray;
}

function addNumber(arr) {
    return arr.map(function(item) {
        var $object = $(item).find("object");
        $object.text(parseInt($object.text(), 10) + 10);
        return item;
    });
}

function sortValues(arr) {
    return arr.sort(function(a, b) {
        a = parseInt($(a).find("object").text(), 10);
        b = parseInt($(b).find("object").text(), 10);
        return a > b ? -1 : a < b ? 1 : 0;
    });
}

function createAndRenderHTML(arr, el) {
    var _html = arr.map(function(item) {
        return "<div class='box'> <object>" + item.text() + "</object></div>"
    });
    $(el).empty().append(_html);
}

  </script>

Answer 1

我能夠通過以下簡單代碼解決整個問題

$(window).on('load', function() {
$(document).ready(function() {

tinysort("div",{order:"desc"});

} );
})

Tinysort模型自動假設10大於2

HATS到tinysort :)