сортировка jquery с каждым элементом itsown

Question

Итак, вот моя Концерн. Я пытаюсь сортировать данные я имею в следующем формате, так что каждый родитель elemnts имеет дочерние элементы, входящие и при выборе сортировки для этого, он должен только сортировать его детские

Кодекс для этого:

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

то, что я пытаюсь: когда я нажимаю ДЕСК первого списка, он должен только элементы, которые по первому списку с использованием данных идентификатора

же для второго списка ..

обоих списках должен работать независимо и сортировка должна быть b е на наследника собственного, я дал выстрел, но не увенчались успехом

вот мой код

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(); 
    }); 

пытался здесь в скрипку, но не повезло [обновлено, чтобы добавить таблицу к каждому LI]

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

Answer 1

в соответствии с этим 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>