javascript - 按类名包装 List 元素

Question

我问过相关答案，但不是这样 问题:How to make new Div inside list items
我的问题是如何打破列表项并从列表项中添加新的类查找，例如下面的示例？

主要 HTML: Fiddle

<div class="widget-content">
<ul>
<li><a class="label1" href="/lorem">lorem</a> Test Content</li>
<li><a class="label1" href="/lorem">lorem</a> Test Content</li>
<li><a class="label1" href="/lorem">lorem</a> Test Content</li>

<li><a class="label2" href="/lorem">lorem</a> Test Content</li>
<li><a class="label2" href="/lorem">lorem</a> Test Content</li>
<li><a class="label2" href="/lorem">lorem</a> Test Content</li>
</ul>
</div>

我想像这样按类拆分列表项:

<div class="widget-content">

<ul class="label1"> <!--add class find from list-->
<li><a class="label1" href="/lorem">lorem</a> Test Content</li>
<li><a class="label1" href="/lorem">lorem</a> Test Content</li>
<li><a class="label1" href="/lorem">lorem</a> Test Content</li>
</ul>

<ul class="label2"> <!--add class find from list-->
<li><a class="label2" href="/lorem">lorem</a> Test Content</li>
<li><a class="label2" href="/lorem">lorem</a> Test Content</li>
<li><a class="label2" href="/lorem">lorem</a> Test Content</li>
</ul>

</div>

我的意思是按类打破列表项并将类添加到父 ul 从上面给出的列表项示例中查找。如何通过 Jquery/JS 简单地做到这一点？
提前致谢。

Answer 1

jsBin demo

$(".widget-content").each(function(){

  var $li = $(this).find("li").unwrap(); // unwrap removes the old UL wrapper
  var uniq = [];

  // Create a collection of unique "label*" classes:
  $li.find("[class^=label]").attr("class", function(i, v){
    if(!~$.inArray(v, uniq)) uniq.push(v);
  });

  // Group LI by A class, and wrap into a new UL with the same class
  $.each(uniq, function(i, klas){
    $("a."+klas).closest("li").wrapAll($("<ul/>",{class:klas}));
  });

});