我有一个网格设置,显示了众多的清单。在这些列表中有“溢价”类别。如:食品清单1、住宿清单1、食品清单2、优质食品清单。
基本上,目前它们是按照HTML中设置的顺序加载的。但我想先列出‘溢价’清单时,选择“所有”,然后第一次当类别“食品”被选中。
有人能帮我吗?小提琴在这里- https://jsfiddle.net/r1yd01fq/2/
$('#Container').mixItUp();
发布于 2016-05-05 10:20:39
找到了一种相对简单的方法。最后使用了.insertAfter,一个位于容器顶部的高级div保持架。然后,我使用了一个洗牌插件来随机选择额外的列表,这样首先加载的就不会总是显示出来。
https://jsfiddle.net/r1yd01fq/4/
$.fn.shuffle = function() {
var allElems = this.get(),
getRandom = function(max) {
return Math.floor(Math.random() * max);
},
shuffled = $.map(allElems, function(){
var random = getRandom(allElems.length),
randEl = $(allElems[random]).clone(true)[0];
allElems.splice(random, 1);
return randEl;
});
this.each(function(i){
$(this).replaceWith($(shuffled[i]));
});
return $(shuffled);
};
// Insert all premium listings first
$(".premium").insertAfter(".prem");
// Shuffle premium listing so they appear randomly
$('.premium').shuffle();
// Instantiate MixItUp:
$('#Container').mixItUp({});
发布于 2016-05-04 17:36:44
这应该适用于“所有”选项。
$(document).on("click", ".filter", function() {
var choice = $(this).data("filter");
switch (choice) {
case "all":
$("#Container div").attr("data-sort", 0);
$("#Container div.premium").attr("data-sort", 1);
break;
}
var d = $("#Container div");
d.sort(function(a, b){
return $(b).data("sort")-$(a).data("sort")
});
$("#Container").html(d);
});
https://stackoverflow.com/questions/37033279
复制相似问题