jquery sorting with each element of itsown

Question

So here is my Concern. I am trying to sort the data i have in the following format so that every parent elemnts has child elments and when the sort is selected for that, it should only sort its childrens

The Code for this is:

<!--- first list --->
 <tr>
  <td colspan="2"><li class="childrens" data-id="99" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Information</strong> <a href="javascript:;" class="sort" data-mode="desc">[Desc]</a> </li></td>
</tr>
<tr>
  <td colspan="2"><li  data-id="81" style="margin-left:20px;"> Running </li></td>
</tr>
<tr>
  <td colspan="2"><li  data-id="113" style="margin-left:40px;"> Coping</li></td>
</tr>
<tr>
  <td colspan="2"><li  data-id="71" style="margin-left:40px;"> Printing </li></td>
</tr>
<tr>
  <td colspan="2"><li  data-id="65" style="margin-left:20px;"> references </li></td>
</tr>

<!--- Second List --->

<tr>
  <td colspan="2"><li class="childrens" data-id="85" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Papers</strong> <a href="javascript:;" class="sort" data-mode="desc">[Desc]</a> </li></td>
</tr>
<tr>
  <td colspan="2"><li  data-id="116" style="margin-left:20px;"> Opening </li></td>
</tr>
<tr>
  <td colspan="2"><li  data-id="109" style="margin-left:20px;"> Closng </li></td>
</tr>

what i am trying is: when i click the desc of the first list, it should only the elements which are under the first list using data-id

same for second list ..

both lists should work independently and sorting should be on heir own, i gave a shot but not successful

here is my code

function sortdesc(){
    $('li.childrens').sort(function(a,b){
       return parseInt(a.getAttribute('data-id'),10)-parseInt(b.getAttribute('data-id'),10)
    });
}

$(document).on('click',".sort",function(e) {
        sortdesc();
    });

tried here in fiddle but no luck [updated to add table to each li]

http://jsfiddle.net/HWmz3/85/

Why not put each list in its own table? – ibrahim mahrir Feb 07 '17 at 17:26 — ibrahim mahrir, Feb 07 '17 at 17:26
its gonna be a big change the page is too big – Sam Feb 07 '17 at 17:27 — Sam, Feb 07 '17 at 17:27
okay, let do it, how we gonna fix it then – Sam Feb 07 '17 at 17:28 — Sam, Feb 07 '17 at 17:28

score 0 · Accepted Answer · edited May 23 '17 at 12:08

According to this answer:

function sortdesc(elem) {
  // get the table of the clicked link, find its tbody
  var $tbody = $(elem).closest('table').find('tbody');
  // sort the tr of this tbody
  $tbody.find('tr')
        .sort(function(a, b) {
          var a = $(a).find('li'); // get the li of a tr
          var b = $(b).find('li'); // get the li of b tr
          return a.data('id') < b.data('id') ? -1 : 1; // compare and return the result
        })
        .appendTo($tbody); // to make the sort
}

$(document).on('click', ".sort", function(e) {
  // pass the link that was clicked to the function:
  sortdesc(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--- first list --->
<table>
  <thead>
    <tr>
      <td colspan="2">
        <li class="childrens" data-id="99" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Information</strong>  <a href="javascript:;" class="sort" data-mode="desc">[Desc]</a> 
        </li>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">
        <li data-id="81" style="margin-left:20px;">Running</li>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <li data-id="113" style="margin-left:40px;">Coping</li>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <li data-id="71" style="margin-left:40px;">Printing</li>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <li data-id="65" style="margin-left:20px;">references</li>
      </td>
    </tr>
  </tbody>
</table>

<!--- Second List --->
<table>
  <thead>
    <tr>
      <td colspan="2">
        <li class="childrens" data-id="85" style="list-style:none;margin-left:0px;"> <strong style="font-size:16px;">Papers</strong>  <a href="javascript:;" class="sort" data-mode="desc">[Desc]</a> 
        </li>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="2">
        <li data-id="116" style="margin-left:20px;">Opening</li>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <li data-id="109" style="margin-left:20px;">Closng</li>
      </td>
    </tr>
  </tbody>
</table>

Thanks, But i do not want to use append, because it keeps on appending, i tried using `.empty()` but that did not worked, how do i fix it because i also want to apply the asc mode — Sam, Feb 07 '17 at 19:00
@sam the tbody is keeping things orginized do you really want to get rid of it? + What didn't work? Explain!! — ibrahim mahrir, Feb 07 '17 at 20:48

jquery sorting with each element of itsown

1 Answers1