基於第二類對DIV進行排序，然後根據內部文本按字母順序排序

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>