[英]Javascript/jQuery group and sort group
我目前有一系列由我們的MVC應用程序生成的div。 我試圖通過各種“數據 - ”屬性進行排序。 我能夠通過名為“data-categoryname”的屬性對項目進行分組。
每個項目還有一個'data-categorysortorder',我想在其中按照排序順序值對'data-categoryname'創建的組進行排序。
我有一個JS Fiddle啟動,並將分組分組,我現在需要幫助按類別名稱按“類別排序順序”對組進行排序。 任何幫助表示贊賞。
https://jsfiddle.net/c0fawcnf/9/
//CURRENTLY HAVE GROUPING BY CATEGORY ITEM NAME AND WRAPPING EACH GROUP BY CATEGORY NAME, BUT NOW NEED TO SORT EACH CATEGORY WRAPPER BY THE ITEMS 'data-categorydisplayorder'
var $item = $('.item-box'),
items = {};
$item.each(function () {
items[$(this).data('categoryitemname')] = '';
});
for (category in items) {
var categoryLowerCase = category.toLowerCase();
$item.filter('[data-categoryitemname=' + category + ']').wrapAll('<div id="' + categoryLowerCase + '" class="categoryWrapper" data-wrappercategorydisplayorder="NEED_CATEGORY_DISPLAY_VALUE_HERE_AND_SORT_BY_THIS_VALUE"></div>');
//return list;
$('div#' + categoryLowerCase + '').prepend('<div class="page-title"><h1>' + category.replace("-", " ") + '</h1></div>');
}
// THESE ITEMS ARE OUTPUTTED BY AN MVC APPLICATION TO THE UI - I NEED TO SORT ON THE CLIENT SIDE BASED ON PARAMETERS
<div class="item-box" data-categoryitemname="Fall" data-itemsortorder="2" data-categorydisplayorder="2">Fall Item</div>
<div class="item-box" data-categoryitemname="Fall" data-itemsortorder="0" data-categorydisplayorder="2">Fall Item</div>
<div class="item-box" data-categoryitemname="Fall" data-itemsortorder="1" data-categorydisplayorder="2">Fall Item</div>
<div class="item-box" data-categoryitemname="Summer" data-itemsortorder="2" data-categorydisplayorder="1">Summer Item</div>
<div class="item-box" data-categoryitemname="Summer" data-itemsortorder="1" data-categorydisplayorder="1">Summer Item</div>
<div class="item-box" data-categoryitemname="Summer" data-itemsortorder="0" data-categorydisplayorder="1">Summer Item</div>
<div class="item-box" data-categoryitemname="Winter" data-itemsortorder="2" data-categorydisplayorder="3">Winter Item</div>
<div class="item-box" data-categoryitemname="Winter" data-itemsortorder="1" data-categorydisplayorder="3">Winter Item</div>
<div class="item-box" data-categoryitemname="Winter" data-itemsortorder="0" data-categorydisplayorder="3">Winter Item</div>
<div class="item-box" data-categoryitemname="Spring" data-itemsortorder="1" data-categorydisplayorder="0">Spring Item</div>
<div class="item-box" data-categoryitemname="Spring" data-itemsortorder="2" data-categorydisplayorder="0">Spring Item</div>
<div class="item-box" data-categoryitemname="Spring" data-itemsortorder="0" data-categorydisplayorder="0">Spring Item</div>
我做了很多關於如何對項目進行排序的搜索,但是在已知元素中找到了很多已排序的元素,並且頁面上已存在一個ID。 由於我動態地將組添加到DOM,然后在創建組后進行排序,我還沒有真正找到關於如何做到這一點的任何內容。
更新:我得到了附加到組元素的排序順序值。 但我的排序功能仍然無法正常工作。 我更新了我的JS小提琴
https://jsfiddle.net/c0fawcnf/12/
// CURRENTLY HAVE GROUPING BY CATEGORY ITEM NAME AND WRAPPING EACH GROUP BY CATEGORY NAME, BUT NOW NEED TO SORT EACH CATEGORY WRAPPER BY THE ITEMS 'data-categorydisplayorder'
var $item = $('.item-box'),
items = {};
$item.each(function () {
items[$(this).data('categoryitemname')] = '';
});
for (category in items) {
var categoryLowerCase = category.toLowerCase();
$item.filter('[data-categoryitemname=' + category + ']').wrapAll('<div id="' + categoryLowerCase + '" class="categoryWrapper" data-wrappercategorydisplayorder="NEED_CATEGORY_DISPLAY_VALUE_HERE_AND_SORT_BY_THIS_VALUE"></div>');
//return list;
$('div#' + categoryLowerCase + '').prepend('<div class="page-title"><h1>' + category.replace("-", " ") + '</h1></div>');
// GET ITEM BOX DISPLAY ORDER PROPERTY AND ATTACH IT TO THE WRAPPER CATEGORY DISPLAY PROPERTY
var elem = $('div#' + categoryLowerCase + ' .item-box');
elem.parent().attr("data-wrappercategorydisplayorder", elem.data("categorydisplayorder"));
}
// ATTEMPT TO SORT - BUT NOT WORKING
$('.productCategoryWrapper').sort(sort_items).appendTo('#item-grid');
//IS THIS EVEN CORRECT?
function sort_items(a, b) {
console.log('we shall sort');
return ($(b).data('wrappercategorydisplayorder')) < ($(a).data('wrappercategorydisplayorder')) ? 1 : -1;
}
解決了它
我需要它的方式。 萬一其他人有興趣。 這是解決方案。
https://jsfiddle.net/c0fawcnf/14/
HTML
<!--THESE ITEMS ARE OUTPUTTED BY AN MVC APPLICATION TO THE UI - I NEED TO SORT ON THE CLIENT SIDE BASED ON PARAMETERS-->
<div id="item-grid">
<div class="item-box" data-categoryitemname="Fall" data-itemsortorder="2" data-categorydisplayorder="2">Fall Item</div>
<div class="item-box" data-categoryitemname="Fall" data-itemsortorder="0" data-categorydisplayorder="2">Fall Item</div>
<div class="item-box" data-categoryitemname="Fall" data-itemsortorder="1" data-categorydisplayorder="2">Fall Item</div>
<div class="item-box" data-categoryitemname="Summer" data-itemsortorder="2" data-categorydisplayorder="1">Summer Item</div>
<div class="item-box" data-categoryitemname="Summer" data-itemsortorder="1" data-categorydisplayorder="1">Summer Item</div>
<div class="item-box" data-categoryitemname="Summer" data-itemsortorder="0" data-categorydisplayorder="1">Summer Item</div>
<div class="item-box" data-categoryitemname="Winter" data-itemsortorder="2" data-categorydisplayorder="3">Winter Item</div>
<div class="item-box" data-categoryitemname="Winter" data-itemsortorder="1" data-categorydisplayorder="3">Winter Item</div>
<div class="item-box" data-categoryitemname="Winter" data-itemsortorder="0" data-categorydisplayorder="3">Winter Item</div>
<div class="item-box" data-categoryitemname="Spring" data-itemsortorder="1" data-categorydisplayorder="0">Spring Item</div>
<div class="item-box" data-categoryitemname="Spring" data-itemsortorder="2" data-categorydisplayorder="0">Spring Item</div>
<div class="item-box" data-categoryitemname="Spring" data-itemsortorder="0" data-categorydisplayorder="0">Spring Item</div>
</div>
JAVASCRIPT
//CURRENTLY HAVE GROUPING BY CATEGORY ITEM NAME AND WRAPPING EACH GROUP BY CATEGORY NAME, BUT NOW NEED TO SORT EACH CATEGORY WRAPPER BY THE ITEMS 'data-categorydisplayorder'
var $item = $('.item-box'),
items = {};
$item.each(function () {
items[$(this).data('categoryitemname')] = '';
});
for (category in items) {
var categoryLowerCase = category.toLowerCase();
$item.filter('[data-categoryitemname=' + category + ']').wrapAll('<div id="' + categoryLowerCase + '" class="categoryWrapper" data-wrappercategorydisplayorder=""></div>');
//return list;
$('div#' + categoryLowerCase + '').prepend('<div class="page-title"><h1>' + category.replace("-", " ") + '</h1></div>');
//GET ITEM BOX DISPLAY ORDER PROPERTY AND ATTACH IT TO THE WRAPPER CATEGORY DISPLAY PROPERTY
var elem = $('div#' + categoryLowerCase + ' .item-box');
//Give the parent element the category display value that is on the child item.
elem.parent().attr("data-wrappercategorydisplayorder", elem.data("categorydisplayorder"));
}
//SORT
function sort_items(a, b) {
console.log('we shall sort');
var a1 = $(a).data('wrappercategorydisplayorder');
var b1 = $(b).data('wrappercategorydisplayorder');
return a1 < b1 ? -1 : 1;
}
var ff = $('.categoryWrapper').get().sort(sort_items);
$.each(ff, function(index, item){
$(this).appendTo('#item-grid');
});
我假設你最終想要通過data-itemsortorder
值對每個組中的項進行排序,然后首先創建一個函數,首先按categorydisplayorder
然后按itemsortorder
對所有項進行排序。
function sort_items(a, b) {
var ai = $(a).data('categorydisplayorder');
var bi = $(b).data('categorydisplayorder');
if (ai < bi) {
return -1;
} else if (ai > bi) {
return 1;
} else {
ai = $(a).data('itemsortorder');
bi = $(b).data('itemsortorder');
if (ai < bi) {
return -1;
} else if (ai > bi) {
return 1;
} else {
return 0;
}
}
}
並創建一個容器元素來插入組
<div id="container"></div>
然后,用於排列分組和排序項的腳本是
var groups = [];
var groupcontainer;
var items = $('.item-box');
var sorted = items.get().sort(sort_items);
$.each(sorted, function (index, item) {
var group = $(item).data('categoryitemname');
if (groups.indexOf(group) == -1) {
groups.push(group);
var title = $('<div></div>').addClass('page-title').html($('<h1></h1>').text(group));
groupcontainer = $('<div></div>').addClass('categoryWrapper');
groupcontainer.append(title);
$('#container').append(container);
}
container.append(item);
});
參考小提琴
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.