Javascript / jQuery组和排序组

时间：2017-02-24 20:43:30

标签： javascript jquery asp.net-mvc sorting

我目前有一系列由我们的MVC应用程序生成的div。 我试图按各种数据排序 - ＆＃39;属性。 我能够通过名为＆＃39; data-categoryname＆＃39;。

的属性对项目进行分组

每个项目还有一个＆＃39; data-categorysortorder＆＃39;我想在其中对由＆quot; data-categoryname＆＃39;创建的组进行排序。按该排序顺序值。

我开始使用JS Fiddle，并将分组分组，我现在需要帮助按类别名称按类别排序顺序对组进行排序＆＃39;。任何帮助表示赞赏。

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，然后在创建组后进行排序，我还没有真正找到关于如何做到这一点的任何内容。

更新 我得到了附加到group元素的排序顺序值。但我的排序功能仍然无法正常工作。我更新了我的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;
}

2 个答案:

答案 0 :(得分：0)

已解决此问题

我需要它的方式。万一其他人有兴趣。这是解决方案。

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

答案 1 :(得分：0)

我假设您最终希望按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);
});

参考fiddle

相关问题
最新问题