jQuery包装类

Question

您好我有这个li列表，包含动态类（并不总是相同）。总有一个.connected类和两组“数字类”。

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

我想在这样的组中对类进行换行/排序：

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

我该怎么做？

- 更新 -

我的排序逻辑是我想要包含包含相同类的元素。

我尝试过像$('.22').wrapAll('<ul/>');这样的东西，但由于这些类是生成的而不是静态的，所以我找不到办法。

- 更新2 -

想想我怎么能这样做。但我需要一点帮助。

首先，我将列表项中的所有类值推送到数组。 然后删除该数组中的所有重复项。 稍后迭代数组并将这些数组值包装在ul中。 $('array[1]').wrapAll('<ul/>');

jsfiddle link

Answer 1

演示：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 />');


});