сортировать элемент li по дате li и перемещать его с полным содержимым jquery

Question

Я пытаюсь переместить базу элементов li на ее новейшую дату div.Я создал этот Jsfiddle согласно этому классу dateDiv только для скрипки, но я хочу переместить полный sorted_li.

из-за этой проблемы я попытался использовать этот скрипт.

$(document).on('change', '#exampleSelect', function() {
  var filter = $(this).val();
  if (filter == 'Newest') {
    var elems = $.makeArray($('.dateDiv'));
    elems.sort(function(a, b) {
      var dateA = new Date($(a).text()).getTime();
      var dateB = new Date($(b).text()).getTime();
      return dateA < dateB;
    });
    $('.past-exams').html(elems);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="exampleSelect" class="form-control">
  <option value="Newest">Newest</option>
  <option value="Oldest">Oldest</option>
  <option value="Best">Best</option>
  <option value="Worst">Worst</option>
</select>
<ul class="past-exams">
  <li class="sorted_li">
    <span class="grade grade-low">40%</span>
    <ul>
      <li class="dateDiv"><strong>Sep 17, 2019 12:58 AM</strong></li>
      <li><strong>Exam Time: </strong>00:00:15</li>
    </ul>
  </li>
  <li class="sorted_li">
    <span class="grade grade-low">10%</span>
    <ul>
      <li class="dateDiv"><strong>Sep 24, 2019 05:06 AM</strong></li>
      <li><strong>Exam Time: </strong>00:00:19</li>
    </ul>
  </li>
  <li class="sorted_li">
    <span class="grade grade-low">20%</span>
    <ul>
      <li class="dateDiv"><strong>Sep 17, 2019 12:13 AM</strong></li>
      <li><strong>Exam Time: </strong>00:03:18</li>
    </ul>
  </li>
</ul>

Но я не понимаю, как переместить полный sorted_li.

Может кто-нибудь помочь мне с этим.

Answer 1

Вам необходимо применить сортировку к элементам li вместо элементов даты и сравнить дату внутри li в функции сортировки.См. Ниже код

$(document).on('change', '#exampleSelect', function() {
          var filter = $(this).val();

          if (filter == 'Newest') {
            var elems = $.makeArray($('.sorted_li'));

            var sorted = elems.sort(function(a, b) {
              var dateA = new Date($(a).find('.dateDiv').text()).getTime();
              var dateB = new Date($(b).find('.dateDiv').text()).getTime();
          //console.log(dateA + " and " + dateB);
              return dateA - dateB;
            });
            $('.past-exams').empty().append(sorted);
          }
        });

JSFiddle Demo

Answer 2

3 изменения

• var elems = $.makeArray($('.sorted_li'));
• найти: $(a).find(".dateDiv").text();
• Правильная функциональность сортировки: return dateB - dateA; сначала новые

$(document).on('change', '#exampleSelect', function() {
  var filter = $(this).val();
  if (filter == 'Newest') {
    var elems = $.makeArray($('.sorted_li'));
    elems.sort(function(a, b) {
      var dateA = new Date($(a).find(".dateDiv").text()).getTime();
      var dateB = new Date($(b).find(".dateDiv").text()).getTime();
      return dateB - dateA; // newest
    });
    $('.past-exams').html(elems);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="exampleSelect" class="form-control">
  <option value="Newest">Newest</option>
  <option value="Oldest">Oldest</option>
  <option value="Best">Best</option>
  <option value="Worst">Worst</option>
</select>
<ul class="past-exams">
  <li class="sorted_li">
    <span class="grade grade-low">40%</span>
    <ul>
      <li class="dateDiv"><strong>Sep 17, 2019 12:58 AM</strong></li>
      <li><strong>Exam Time: </strong>00:00:15</li>
    </ul>
  </li>
  <li class="sorted_li">
    <span class="grade grade-low">10%</span>
    <ul>
      <li class="dateDiv"><strong>Sep 24, 2019 05:06 AM</strong></li>
      <li><strong>Exam Time: </strong>00:00:19</li>
    </ul>
  </li>
  <li class="sorted_li">
    <span class="grade grade-low">20%</span>
    <ul>
      <li class="dateDiv"><strong>Sep 17, 2019 12:13 AM</strong></li>
      <li><strong>Exam Time: </strong>00:03:18</li>
    </ul>
  </li>
</ul>

Но СУХОЙ - не повторяйся

$(document).on('change', '#exampleSelect', function() {
  var elems = $.makeArray($('.sorted_li'));
  var filter = $(this).val();
  if (filter === 'Newest' || filter === 'Oldest') {
    elems.sort(function(a, b) {
      var dateA = new Date($(a).find(".dateDiv").text()).getTime();
      var dateB = new Date($(b).find(".dateDiv").text()).getTime();
      return filter === 'Newest' ? dateB - dateA : dateA - dateB;
    });
    $('.past-exams').html(elems);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="exampleSelect" class="form-control">
  <option value="Newest">Newest</option>
  <option value="Oldest">Oldest</option>
  <option value="Best">Best</option>
  <option value="Worst">Worst</option>
</select>
<ul class="past-exams">
  <li class="sorted_li">
    <span class="grade grade-low">40%</span>
    <ul>
      <li class="dateDiv"><strong>Sep 17, 2019 12:58 AM</strong></li>
      <li><strong>Exam Time: </strong>00:00:15</li>
    </ul>
  </li>
  <li class="sorted_li">
    <span class="grade grade-low">10%</span>
    <ul>
      <li class="dateDiv"><strong>Sep 24, 2019 05:06 AM</strong></li>
      <li><strong>Exam Time: </strong>00:00:19</li>
    </ul>
  </li>
  <li class="sorted_li">
    <span class="grade grade-low">20%</span>
    <ul>
      <li class="dateDiv"><strong>Sep 17, 2019 12:13 AM</strong></li>
      <li><strong>Exam Time: </strong>00:03:18</li>
    </ul>
  </li>
</ul>