jQuery的类包装

嗨我有这个李的列表，包含动态类（不总是相同的）。总是有一个.connected类和两组“数字类”。jQuery的类包装

<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

来源

2011-07-10 Mattias Alfborger

究竟什么是您的排序逻辑？从你的例子中不清楚。 – user122211

除了上面的问题，Stack Overflow不是一个免费的编码服务，尽管人们经常用代码做出响应。你有什么尝试？你会采取什么方法？你有什么其他方法考虑和拒绝？你自己的代码是做什么的？你为什么不高兴呢？你明白了。人们很乐意*帮助*，但是当它是“请为我写这篇文章”时，它是无关紧要的。 –

如果元素可能在多个组中，该怎么办？ –

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


});

来源

2011-07-13 03:30:59 kei

喜欢它，谢谢你的评论！ –

jQuery的类包装

回答

相关问题