按类名称包装列表元素 [英] Wrap List elements by class name

问题描述

我已经问过相关的答案，但不是这样问题:如何在列表中创建新的Div项目
我的问题是如何中断列表项并从列表项中添加新的类查找，例如下面的示例?

I have asked related answer, but not same like this question: How to make new Div inside list items
My question is how to break list items and add new Class find from list items, example below?

主要HTML : 小提琴

<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做到这一点?
预先感谢.

I mean break list items by class and add class to parent ul find from list items example given above. How to do this simply by Jquery/JS ?
Thanks in advance.

推荐答案

jsBin演示

$(".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}));
  });

});

这篇关于按类名称包装列表元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！