jQuery, как получить элементы со значением атрибута data, который содержит «/», и отсортировать их - PullRequest
Новая
       2

jQuery, как получить элементы со значением атрибута data, который содержит «/», и отсортировать их

0 голосов
/ 29 марта 2019

Я пытаюсь получить элементы, которые содержат определенную строку или значение на основе их атрибута данных, и отсортировать их, потому что они являются датами.Я нашел хороший пример JSFiddle, который принимает значение атрибута данных, а затем преобразует его в формат даты эпохи (пока хорошо), а затем сортирует их.НО он сортирует их только при первой загрузке страницы с функцией вызова.Когда я обернул его в функцию и попытался вызвать его снова, переключение порядка с ASC на DESC вместо того, чтобы просто сохранять порядок ASC или DESC.
Тем не менее, у меня есть JSFiddle, основанный на найденном примере, но теперь, когдаЯ пытаюсь постоянно сортировать даты и сохранять формат ASC или DESC, значение данных, которое было преобразовано во время эпохи, становится NaN.

Итак, я попытался обернуть его в оператор 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>

Это более обширный Fiddle, над которым я работал, пытаясь заставить работать несколько опций, но удерживая порядок от переключения.Но это не совсем работает, потому что в консолях вы увидите, что 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>

Любая помощь приветствуется.

1 Ответ

1 голос
/ 29 марта 2019
  • Изменен метод передачи 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...