Javascript/jQuery組和排序組

我目前有一系列由我們的MVC應用程序生成的div。我試圖按各種'數據'屬性進行排序。我能夠通過名爲'data-categoryname'的屬性對項目進行分組。Javascript/jQuery組和排序組

每個項目還有一個'data-categorysortorder'，我想按照該排序順序值對'data-categoryname'創建的組進行排序。

我有一個JS小提琴開始，並有分組分組，我現在需要幫助按類別名稱按'分類排序順序'排序組。任何幫助表示讚賞。

//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; 
}

來源

2017-02-24 ClosDesign

你想按「categorydisplayorder」排序組（所以輸出將是Spring-Summer-Fall-W inter），並通過'itemsortorder'排序每個組中的項目（組內的項目全都具有相同的文本，因此該比較令人困惑） –

現在我只想按'categorydisplayorder'排序組（所以輸出將會是春夏秋冬）。 – ClosDesign

好的 - 我更新了你的[小提琴]（https：// jsfiddle。net/c0fawcnf/10 /）對其中一個組中的項目進行排序（在我完全理解你想要做的事情之前）。在你的情況下，你將需要一個圍繞組的容器，當你爲每個組創建容器時，添加一個'data-sortorder'屬性，以便以類似的方式使用它。我即將休息一下，但如果你沒有解決問題，我會在一小時左右添加一個答案 –

解決它

我需要它的方式。如果其他人感興趣。這是解決方案。

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'); 
});

來源

2017-02-24 22:35:05 ClosDesign

我假設你最終要由data-itemsortorder值，每一組中的項目進行排序，然後通過創建啓動函數首先按categorydisplayorder然後按排序所有項目

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); 
});

參考fiddle

來源

2017-02-24 23:11:29

Javascript/jQuery組和排序組

回答

相關問題