jqueryソート各itsownownの要素

Question

ここに私の心配です。

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

：すべての親elemntsが子elmentsを持っており、ソートが、そのために選択されている場合、それはこのための唯一の並べ替えその子供

コードがある必要がありますように、私は次の形式で、私が持っているデータをソートしようとしています

は、私は何をしようとしていることである：私は最初のリスト、それすべき第二のリストのための

同じデータIDを使用して、最初のリストの下にある要素だけ..

両方のリストのDESCをクリックすると、独立して動作し、ソートは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(); 
    }); 

はフィドルにここにしようとしたコードが、[各リーにテーブルを追加するように更新]運です

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

この answerによる

Answer 1

：

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>