通过将文本替换为类来换行/断开列表元素

Question

我的问题是如何通过从列表项文本中添加类查找来包装/中断列表项，例如下面的示例？
我的相关问题在这里：Wrap List elements by class name

Fiddle link

<div class="widget-content">
    <ul>
        <li><span class="label"> demo-text1 </span> Test Content</li>
        <li><span class="label"> demo-text2 </span> Test Content</li>
        <li><span class="label"> demo-text1 </span> Test Content</li>

        <li><span class="label"> demo-text2 </span> Test Content</li>
        <li><span class="label"> demo-text1 </span> Test Content</li>
        <li><span class="label"> demo-text2 </span> Test Content</li>
    </ul>
</div>

我想打破这样的列表项：

<div class="widget-content">
    <ul class="demo-text1">
        <li><span class="label"> demo-text1 </span> Test Content</li>
        <li><span class="label"> demo-text1 </span> Test Content</li>
        <li><span class="label"> demo-text1 </span> Test Content</li>

    </ul> <!-- Break part 1 -->

    <ul class="demo-text2">
        <!-- Break part 2 -->
        <li><span class="label"> demo-text2 </span> Test Content</li>
        <li><span class="label"> demo-text2 </span> Test Content</li>
        <li><span class="label"> demo-text2 </span> Test Content</li>
    </ul>
</div>

我的意思是像第二个 HTML 示例那样将列表项分为两部分。通过替换上面给出的class="label"example（第二个HTML）中的文本，将类添加到父ul。

我怎样才能简单地通过 jQuery/JS 做到这一点？这是我尝试过的：

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

提前致谢。

Answer 1

您可以使用.each()、$.each()、.html()、.text()、.trim()

var arr = []; // array to store `li` elements
var widget = $(".widget-content");

$(".widget-content li").each(function(index, el) {
  var html = el.outerHTML;
  // number at `label` text
  var curr = $(".label", this).text().trim().slice(-1);
  if (arr[curr - 1]) {
    arr[curr - 1].push(html)
  } else {
    arr[curr - 1] = [html];
  }
});

widget.html(""); // remove existing `html`

$.each(arr, function(key, val) {
  var li = val.join("");
  $(".widget-content").append($("<ul/>", {
    html: li,
    "class":$(li).eq(0).find(".label").text().trim()
  }))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="widget-content">
  <ul>
    <li><span class="label"> demo-text1 </span> Test Content</li>
    <li><span class="label"> demo-text2 </span> Test Content</li>
    <li><span class="label"> demo-text1 </span> Test Content</li>

    <li><span class="label"> demo-text2 </span> Test Content</li>
    <li><span class="label"> demo-text1 </span> Test Content</li>
    <li><span class="label"> demo-text2 </span> Test Content</li>
  </ul>
</div>