如何获取SORT数组返回的完整HTML表数据？

Question

I have the following code that calls OBJECT adds +10 then sorts the result, at the moment it is returning:

bbb 20
ccc 13
aaa 11
ddd 10

This is a correct sort and the values are correct. However I need the full table to be included in those results as per code snippet.

 <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> 

How do I get the full HTML table data returned with the SORT array? Perhaps there is a better way of doing it?

<!--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

I was able to solve this entire problem with the following simple code

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

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

} );
})

The Tinysort model automatically assumes 10 is greater than 2

HATS off to tinysort:)