同位素按特定名称和日期排序

时间:2018-10-25 08:23:13

标签: jquery sorting jquery-isotope

我有一些带有排序按钮的简单isotope列表:

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.element-item',
  layoutMode: 'fitRows',
  getSortData: {
    date: function ( itemElem  ) {
              return Date.parse($( itemElem ).find('.date').data('time'));
          },
          popular: function ( itemElem  ) {
              return parseInt($( itemElem ).find('.comment').data('comment'), 10);
          },
          name1: function ( itemElem  ) {
              return $( itemElem ).find('.name1');
          },
          name2: function ( itemElem  ) {
              return $( itemElem ).find('.name2');
          },
          name3: function ( itemElem  ) {
              return $( itemElem ).find('.name3');
          },
  },
  sortAscending: false,
  // sortBy: 'new',
});

// bind sort button click
$('.sort-by-button-group').on( 'click', 'button', function() {
  var sortValue = $(this).attr('data-sort-value');
  $grid.isotope({ sortBy: sortValue });
});

// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'button', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $( this ).addClass('is-checked');
  });
});
.element-item {
  border:1px solid #eee;
  width: 100%;
  padding-left: 1rem;
  font-family: monospace;
}

.date {
  display: block;
  color:#777;
  margin-bottom: 1rem;
}

.comment {
  display: block;
  margin-bottom: 1rem;
}

button.is-checked {
  background: #000;
  color: #fff;
}
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/3.0.6/isotope.pkgd.min.js"></script>
  
  
  
<div class="button-group sort-by-button-group">
  <button class="button is-checked" data-sort-value="original-order">ALL</button>
  <button class="button" data-sort-value="date">New</button>
  <button class="button" data-sort-value="popular">Popular</button>
  <button class="button" data-sort-value="name1">Name 1</button>
  <button class="button" data-sort-value="name2">Name 2</button>
  <button class="button" data-sort-value="name3">Name 3</button>
</div>  
  
  
<div class="grid">
  <div class="element-item " data-category="it 1">
    <h3 class="name name1">Name 1</h3>
    <span class="date" data-time="02-07-2017">02.07.2017</span>
    <span class="comment" data-comment="1">1 comment</span>
  </div>
  <div class="element-item " data-category="it 2">
    <h3 class="name name2">Name 2</h3>
    <span class="date" data-time="01-01-2018T08:23:11">01.01.2018 08:23:11</span>
    <span class="comment" data-comment="20">20 comments</span>
  </div>
  <div class="element-item " data-category="it 3">
    <h3 class="name name3">Name 3</h3>
    <span class="date" data-time="05-07-2017">05.07.2017</span>
    <span class="comment" data-comment="33">33 comments</span>
  </div>
  <div class="element-item " data-category="it 1">
    <h3 class="name name1">Name 1</h3>
    <span class="date" data-time="20-03-2018T08:23:11">20.03.2018 08:23:11</span>
    <span class="comment" data-comment="100">100 comments</span>
  </div>
  <div class="element-item " data-category="it 2">
    <h3 class="name name2">Name 2</h3>
    <span class="date" data-time="14-10-2017">14.10.2017</span>
    <span class="comment" data-comment="5">5 comment</span>
  </div>
  <div class="element-item " data-category="it 3">
    <h3 class="name name3">Name 3</h3>
    <span class="date" data-time="07-06-2018">07.06.2018</span>
    <span class="comment" data-comment="1">1 comment</span>
  </div>
  <div class="element-item " data-category="it 1">
    <h3 class="name name1">Name 1</h3>
    <span class="date" data-time="01-09-2017">01.09.2017</span>
    <span class="comment" data-comment="1">1 comment</span>
  </div>
  <div class="element-item " data-category="it 2">
    <h3 class="name name2">Name 2</h3>
    <span class="date" data-time="11-11-2017">11.11.2017</span>
    <span class="comment" data-comment="3">3 comments</span>
  </div>
  <div class="element-item " data-category="it 3">
    <h3 class="name name3">Name 3</h3>
    <span class="date" data-time="03-04-2018">03.04.2018</span>
    <span class="comment" data-comment="26">26 comments</span>
  </div>
</div>

问题:如何按特定名称对列表进行排序,例如,首先是所有Name 1,然后是所有其他名称?

问题:如何按日期格式DD-MM-YYTHH:MM:SS(例如01-01-2018T08:23:11)对列表进行排序?

不过滤,仅排序,仅同位素!

附言::现在所有项仅对热门帖子进行排序。对其余部分进行某种排序会奇怪地起作用(不是应该的)。

0 个答案:

没有答案