Question

我试图根据它们的数据属性获取包含某个字符串或值的元素，并对它们进行排序，因为它们是日期。我找到了一个不错的JSFiddle示例，该示例接受data属性值，然后将其转换为Epoch日期格式（现在适合），然后对其进行排序。但是，它仅在首次加载的自调用功能页面上对它们进行排序。当我将其包装到函数中并尝试再次调用它时，顺序从ASC切换到DESC，而不仅仅是保持ASC或DESC顺序。
就是说，我有一个基于发现的示例的JSFiddle，但是现在当我尝试对日期进行连续排序并保持ASC或DESC格式时，转换为大纪元时间的数据值将变为NaN。

因此，我尝试将其包装在IF语句中，以查看IF数据属性值中是否包含“ /”，但现在似乎也不起作用。我正在研究的小提琴中有很多评论。我已经很接近了，但是当我每次都希望单击该函数进行排序时，我希望顺序保持不变而不会出错（检查控制台，您会看到NaN）。

这是使用原始代码的Fiddle示例，但我将其包装在一个函数中并通过单击进行调用，并且每次顺序都相反。我只希望它走ASC或DESC，而不是来回切换。 http://jsfiddle.net/r8hbx2e3/1/

//ORIGINALLY BASED ON http://jsfiddle.net/greguarr/2fr0vmhu/
//BUT THIS JUST REORDERS EVERYTHING ASC AND DESC ON EVERY CLICK.  JUST WANT IT ONE OR THE OTHER 
//HOW DO YOU GET THIS TO STOP REVERSING ORDER.

//ONE I HAVE BEEN WORKING ON IS HERE: http://jsfiddle.net/ndh9Lyuj/5/

function sortItems() {
  var container = $(".sort-list");
  var items = $(".sort-item");

  items.each(function() {
    // Convert the string in 'data-event-date' attribute to a more
    // standardized date format
    var BCDate = $(this).attr("data-event-date").split("/");
    var standardDate = BCDate[0] + " " + BCDate[1] + " " + BCDate[2];
    standardDate = new Date(standardDate).getTime();
    $(this).attr("data-event-date", standardDate);
  });

  items.sort(function(a, b) {
    a = parseFloat($(a).attr("data-event-date"));
    b = parseFloat($(b).attr("data-event-date"));
    return a > b ? -1 : a < b ? 1 : 0;
  }).each(function() {
    container.prepend(this);
  });
};

$('p').on('click', function() {
  sortItems();
});

/* This script sorts your list in descending order... to change it to ascending order change the "less than" operator (<) to "greater than" (>) */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<ul class="sort-list">
  <li class="sort-item" data-event-date="01/20/2019">01/20/2019</li>
  <li class="sort-item" data-event-date="10/15/2017">10/15/2017</li>
  <li class="sort-item" data-event-date="11/14/2018">11/14/2018</li>
  <li class="sort-item" data-event-date="02/05/2016">02/05/2016</li>
  <li class="sort-item" data-event-date="10/31/2013">10/31/2013</li>
</ul>
<p>
  Click me
</p>

这是我正在尝试的更广泛的小提琴，尝试使多个选项起作用，但不切换顺序。但这并不是很有效，因为您会在控制台中看到每次单击后NaN都会重新出现。 http://jsfiddle.net/ndh9Lyuj/5/

//ORIGINALLY BASED ON http://jsfiddle.net/greguarr/2fr0vmhu/

var container = $(".sort-list");
var items = $(".sort-item");
var yourArray = [];

function me() {
  items.each(function() {
    console.log("up top" + $(this).attr("data-event-date"));
    // Convert the string in 'data-event-date' attribute to a more
    // standardized date format

    if ($(this).attr("data-event-date").indexOf("/")) { //This does not seem to be working to check if data attribute has value with a slash. 
      var BCDate = $(this).attr("data-event-date").split("/");
      var standardDate = BCDate[0] + " " + BCDate[1] + " " + BCDate[2];
      standardDate = new Date(standardDate).getTime();
      $(this).attr("data-event-date", standardDate);
      console.log("with standard date " + $(this).attr("data-event-date"));
    }
    console.log($(this).attr("data-event-date"));
    // yourArray.push($(this).prop('data-event-date').split(' ')[0]);
  });

  //    nowSort(items);
  //    }
  //function nowSort(items){
  items.sort(function(a, b) {
      a = parseFloat($(a).attr("data-event-date"));
      b = parseFloat($(b).attr("data-event-date"));
      // if(a < b){
      // return -1
      //}
      // return 0;
      // a = $(a).attr("data-event-date");
      // b = $(b).attr("data-event-date");
      return a > b ? -1 : a < b ? 1 : 0;
      // return a > b;
      //alert('sort');
    })
    .each(function() {
      container.prepend(this);
    });
  //alert('sort');
}

$('p').on('click', function() {
  me();
});

/* This script sorts your list in descending order... to change it to ascending order change the "less than" operator (<) to "greater than" (>) */

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<ul class="sort-list">
  <li class="sort-item" data-event-date="04/20/2019">04/20/2019</li>
  <li class="sort-item" data-event-date="03/05/2017">03/05/2017</li>
  <li class="sort-item" data-event-date="04/18/2019">04/18/2019</li>
  <li class="sort-item" data-event-date="01/20/2016">01/20/2016</li>
  <li class="sort-item" data-event-date="10/31/2019">10/31/2019</li>
  <li class="sort-item" data-event-date="02/30/2019">02/31/2019</li>
</ul>
<p>
  click me
</p>

感谢您的帮助。

Answer 1

更改了传递asc或desc的方法
仅将日期转换一次，并将其转换为ISO格式
请勿覆盖原始数据字段
排序时，请检查值是否为asc，以确定哪种排序方式

$('p').on('click', function(){ sortItems('desc'); });

function sortItems (sortDirection) {
  var container = $(".sort-list");
  var items = $(".sort-item");

  items.filter(function(){
    return !$(this).data('convertedEventDate');
  }).each(function() {
    var BCDate = $(this).data("eventDate").split("/");
    var standardDate = `${BCDate[2]}-${BCDate[0]}-${BCDate[1]}`;
    
    standardDate = new Date(standardDate).getTime();
    $(this).data("convertedEventDate", standardDate);
  });
  
  container.append(
    items.sort(function(a, b){
      var $aTime = $(a).data('convertedEventDate');
      var $bTime = $(b).data('convertedEventDate');
      
      if (sortDirection === 'asc') {
        return $aTime - $bTime;
      } else {
        return $bTime - $aTime;
      }
    })
  );
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<ul class="sort-list">
  <li class="sort-item" data-event-date="01/20/2019">01/20/2019</li>
  <li class="sort-item" data-event-date="10/15/2017">10/15/2017</li>
  <li class="sort-item" data-event-date="11/14/2018">11/14/2018</li>
  <li class="sort-item" data-event-date="02/05/2016">02/05/2016</li>
  <li class="sort-item" data-event-date="10/31/2013">10/31/2013</li>
</ul>

<p>Click me</p>

jQuery，如何获取包含“ /”的数据属性值的元素并对其进行排序

1 个答案: