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>

我正在尝试的是：当我点击第一个列表的desc时，它应该只使用data-id

在第一个列表下面的元素

第二个列表相同..

这两个列表应该独立工作，排序应该是继承人的，我给了一个镜头，但没有成功

这是我的代码

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：

＆＃13;

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

＆＃13;

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

＆＃13;

jquery使用它的每个元素进行排序

1 个答案: