我有一些带有排序按钮的简单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
)对列表进行排序?
不过滤,仅排序,仅同位素!
附言::现在所有项仅对热门帖子进行排序。对其余部分进行某种排序会奇怪地起作用(不是应该的)。