Сортировка DIVs на основе второго класса, а затем сортировка по алфавиту для каждого класса на основе внутреннего текста

Question

EDIT: Решение частично с помощью решения ниже. Но по какой-либо причине нижеприведенное решение будет либо правильно сортировать все в алфавитном порядке на основе метки, либо сортировать ее по категории, но комбинация обоих не работает в моем случае. Таким образом, вместо этого я использовал первую часть, которая сортирует все в алфавитном порядке, а затем используется цикл для манипулирования в каждой категории, как это:

 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

Существует метод 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)); 
     }); 

    }; 

})(); 

Ниже приведена демонстрация того, как метод Джейм работает с вашим кейсом.

$(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>