如何按jquery

Question

非常新的代码，只是真正尝试基础。

我需要按发布日期排序此列表，选择子元素的类（.date），然后使用id进行排序。请记住，li的id用于按其他方式排序。我只是想弄清楚如何选择孩子的类，并按孩子的id排序。

这是标记：

<button id="datereleased">Date Released</button>

<div id="sortcontainer">

 <li id="60">
  <h2>Some game</h2>
  <h2 class="date" id="2015">(2015)</h2>  
  <h3>45/100</h3>
  </li>

 <li id="45">
  <h2>Some game</h2>
  <h2 class="date" id="2017">(2017)</h2>
  <h3>45/100</h3>
  </li>

 <li id="80">
  <h2>Some game</h2>
  <h2 class="date" id="2013">(2013)</h2>
  <h3>45/100</h3>
  </li>
</div>

我到目前为止：

$(document).ready(function() {
    $( "#datereleased" ).click(function(){
        var lis = $('#sortcontainer').children('li').remove();    
        lis.sort(function(a, b) {
            return parseInt($('.date > id', a)) >  parseInt($('.date > id', b));
        }); 
        $('#sortcontainer').append(lis);
    });
});

如果有人有任何信息，请提前致谢

Answer 1

将id属性从排序日期中删除。

＆＃13;

＆＃13;

$('#datereleased').on('click', function(){
  var $sortContainer = $('#sortcontainer');
  
  $sortContainer.append(
    $sortContainer.children().sort(function(a, b){
      return (
        parseInt($('.date', a).attr('id'), 10)
        -
        parseInt($('.date', b).attr('id'), 10)
      );
    }).get()
  );
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="datereleased">Date Released</button>

<div id="sortcontainer">
  <li id="60">
    <h2>Some game</h2>
    <h2 class="date" id="2015">(2015)</h2>
    <h3>45/100</h3>
  </li>

  <li id="45">
    <h2>Some game</h2>
    <h2 class="date" id="2017">(2017)</h2>
    <h3>45/100</h3>
  </li>

  <li id="80">
    <h2>Some game</h2>
    <h2 class="date" id="2013">(2013)</h2>
    <h3>45/100</h3>
  </li>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您需要修复自己的选择器，以定位h2类date的{​​{1}}元素，而不是定位标记为id的元素。

然后，您可以通过对id属性的值执行减法对其进行排序，并附加id祖先。

此示例不使用jQuery，并使用较新的语法，如箭头函数：

＆＃13;

＆＃13;

li

＆＃13;

document.addEventListener("DOMContentLoaded", function() {
  document.querySelector("#datereleased").addEventListener("click", function() {
      var sc = document.querySelector("#sortcontainer");

      Array.from(sc.querySelectorAll('li > .date[id]'))
        .sort((a, b) => a.id - b.id)
        .forEach(el => sc.appendChild(el.closest("li")));
    });
});

＆＃13;

＆＃13;

＆＃13;