根据二等对DIVs排序，然后根据内部文本按字母顺序对每个类进行排序。

Question

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

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

我试图使用类名对DIVs进行排序，以便在每个类别中先订购项目，然后在每个类别中按字母顺序排序。但是我的类名太多了，我似乎想不出该怎么做。我会承认，这是我的技能之上，我只是不知道如何做到这一点。我知道这需要把几个功能放在一起，但我不知道从哪里开始。

目前我的清单是这样的

<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()。下面的代码是从他的博客复制的。

/**
 * 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>

​