jQuery emballage des classes

Question

Salut J'ai cette liste de li, contenant des classes dynamiques (pas toujours les mêmes). Il y a toujours une classe .connected et deux séries de "numberclasses".

<ul> 
    <li class="connected 34 22"></li> 
    <li class="connected 54 11"></li> 
    <li class="connected 11 54"></li> 
    <li class="connected 22 34"></li> 
    <li class="connected 12 31"></li> 
    <li class="connected 31 12"></li> 
</ul> 

Je veux envelopper/trier les classes dans des groupes comme celui-ci:

<ul> 
    <li> 
    <ul> 
     <!-- Group consisting elements with classes 12 or 31 --> 
     <li class="connected 12 31">foo</li> 
     <li class="connected 31 12">foo</li> 
    </ul> 
    </li> 
    <li> 
    <ul> 
     <!-- Group consisting elements with classes 22 or 34 --> 
     <li class="connected 34 22">foo</li> 
     <li class="connected 22 34">foo</li> 
    </ul> 
    </li> 
    ... 
</ul> 

Comment puis-je faire cela?

- Mise à jour -

Ma logique de tri est que je veux envelopper des éléments qui contient les mêmes classes.

J'ai essayé quelque chose comme $('.22').wrapAll('<ul/>'); mais comme les classes sont générées et non statiques je ne trouve pas de moyen de le faire.

- Mise à jour 2 -

pense que je sais que je peux le faire. Mais je vais avoir besoin d'un peu d'aide.

D'abord, je place toutes les valeurs de classe des éléments de la liste dans un tableau. Ensuite, supprimez tous les doublons dans ce tableau. Ensuite, parcourez le tableau et enveloppez ces valeurs dans ul. $('array[1]').wrapAll('<ul/>');

jsfiddle link

Answer 1

Démo: http://jsfiddle.net/JX58j/

jquery

$(document).ready(function() { 

    var classMap = []; 

    $('.connected').each(function(idx) { 
     var $this = $(this); 

     // get the classes of each LI and sort them (It's easier to compare this way) 
     var sortedClasses = $this.attr('class').split(' ').sort().toString().replace(/,/g, '-'); 

     // store the resulting sorted classes as data 
     $this.data('grouping', sortedClasses); 


     // add the 'grouping' to the classMap array if it isn't already in there 
     if ($.inArray(sortedClasses, classMap) == -1) { 
      classMap.push(sortedClasses); 
     } 
    }); 

    // create the ULs determined by the length of classMap 
    for (i = 0; i < classMap.length; i++) { 
     $('<ul>') 
      .appendTo('#old-ul') 
      .addClass(classMap[i]);   
    } 

    // move the LIs from old UL to the new ULs 
    $('.connected').each(function() { 
     $this = $(this); 
     $grouping = $this.data('grouping'); 
     $this.appendTo('ul.' + $grouping); 
    }); 

    // wrap the ULs inside #old-ul in an LI tag so it validates 
    $('#old-ul ul').wrap('<li />'); 


});