Question

编辑：部分解决了以下解决方案。但由于某种原因，下面的解决方案要么只是根据标签按字母顺序正确排序所有内容，要么根据类别对其进行排序，但两者的组合在我的情况下都不起作用。所以我使用第一部分，按字母顺序对所有内容进行排序，然后使用for循环来操作每个类别，如下所示：

        for (i = 1; i <= 8; i++) { // 8 because I have 8 categories..
            $('.ai-category-' + i).each(function(){
                $(this).detach().appendTo('#items');
            });
        }

我尝试使用类名将DIV排序到每个类别的第一个订单项，然后在每个类别中按字母顺序排序。但我有太多的类名，我似乎无法弄清楚如何做到这一点。我会承认这超出了我的技能水平，我根本不知道如何做到这一点。我知道这需要将几个功能放在一起，但我不知道从哪里开始。

目前我的列表看起来像这样

<div id="items">
  <div class="item ai-category-1 someOtherClass anotherClass">
    <div class="info">
      <p class="label">ZZ Item Name</p>
    </div>
  </div>
  <div class="item ai-category-2 someOtherClass anotherClass">
    <div class="info">
      <p class="label">ZZ Item Name</p>
    </div>
  </div>
  <div class="item ai-category-1 someOtherClass randomClass">
    <div class="info">
      <p class="label">AA Item Name</p>
    </div>
  </div>
  <div class="item ai-category-2 someOtherClass anotherClass">
    <div class="info">
      <p class="label">AA Item Name</p>
    </div>
  </div>
</div>

我需要它根据第二个类来命令所有.item，该类说明它是什么类别，然后在该类别中按字母顺序使用.label对其进行排序。所以结果应该是这样的

<div id="items">
  <div class="item ai-category-1 someOtherClass randomClass">
    <div class="info">
      <p class="label">AA Item Name</p>
    </div>
  </div>
  <div class="item ai-category-1 someOtherClass anotherClass">
    <div class="info">
      <p class="label">ZZ Item Name</p>
    </div>
  </div>
  <div class="item ai-category-2 someOtherClass anotherClass">
    <div class="info">
      <p class="label">AA Item Name</p>
    </div>
  </div>
  <div class="item ai-category-2 someOtherClass anotherClass">
    <div class="info">
      <p class="label">ZZ Item Name</p>
    </div>
  </div>
</div>

总不会有4个班级，但总会有两个班级，.item将永远是第一个，[class^="ai-category-"]将永远是第二个。如果有人可以推荐我应该看的任何功能或提供解决方案，我将非常感激。

Answer 1

James实现了一个jQuery方法.sortElemnts()。下面的代码是从他的blog。

复制而来的

/**
 * jQuery.fn.sortElements
 * --------------
 * @param Function comparator:
 *   Exactly the same behaviour as [1,2,3].sort(comparator)
 *   
 * @param Function getSortable
 *   A function that should return the element that is
 *   to be sorted. The comparator will run on the
 *   current collection, but you may want the actual
 *   resulting sort to occur on a parent or another
 *   associated element.
 *   
 *   E.g. $('td').sortElements(comparator, function(){
 *      return this.parentNode; 
 *   })
 *   
 *   The <td>'s parent (<tr>) will be sorted instead
 *   of the <td> itself.
 */
jQuery.fn.sortElements = (function(){

    var sort = [].sort;

    return function(comparator, getSortable) {

        getSortable = getSortable || function(){return this;};

        var placements = this.map(function(){

            var sortElement = getSortable.call(this),
                parentNode = sortElement.parentNode,

                // Since the element itself will change position, we have
                // to have some way of storing its original position in
                // the DOM. The easiest way is to have a 'flag' node:
                nextSibling = parentNode.insertBefore(
                    document.createTextNode(''),
                    sortElement.nextSibling
                );

            return function() {

                if (parentNode === this) {
                    throw new Error(
                        "You can't sort elements if any one is a descendant of another."
                    );
                }

                // Insert before flag:
                parentNode.insertBefore(this, nextSibling);
                // Remove flag:
                parentNode.removeChild(nextSibling);

            };

        });

        return sort.call(this, comparator).each(function(i){
            placements[i].call(getSortable.call(this));
        });

    };

})();

以下是Jame的方法如何处理您的案例的演示。

$(document).ready(function() {
  var item = $('.item');
  var btn = $('button');
  
  btn.on('click', function() {
    item
    .sortElements(function(a, b){
      return $('label', a).text() > $('label', b).text() ? 1 : -1;
    })
    .sortElements(function(a, b){
      var aCls = getClassWithPrefix(a, 'ai-category-');
      var bCls = getClassWithPrefix(b, 'ai-category-');
      return aCls > bCls ? 1 : -1;
    });
  });
});

function getClassWithPrefix(ele, prefix) {
  var classes = ele.className.split(/\s+/);
  var clsWithPrefix = undefined;
  classes.forEach(function(cls, i) {
    if(cls.indexOf(prefix) === 0) {
      clsWithPrefix = cls;
    }
  });
  return clsWithPrefix;
}

.ai-category-1:before {
  content: 'Category 1:';
  float: left;
  margin-right: 1ch;
}

.ai-category-2:before {
  content: 'Category 2:';
  float: left;
  margin-right: 1ch;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/padolsey-archive/jquery.fn/master/sortElements/jquery.sortElements.js"></script>

<div id="items">
  <div class="item ai-category-1 someOtherClass anotherClass">
    <div class="info">
      <p class="label">ZZ Item Name</p>
    </div>
  </div>
  <div class="item ai-category-2 someOtherClass anotherClass">
    <div class="info">
      <p class="label">ZZ Item Name</p>
    </div>
  </div>
  <div class="item ai-category-2 someOtherClass randomClass">
    <div class="info">
      <p class="label">AA Item Name</p>
    </div>
  </div>
  <div class="item ai-category-1 someOtherClass anotherClass">
    <div class="info">
      <p class="label">AA Item Name</p>
    </div>
  </div>
</div>

<button>Sort</button>

基于第二类对DIV进行排序，然后根据内部文本按类别按字母顺序排序

1 个答案: