javascript - 在两个 ul 中包装/拆分列表项

Question

尝试换行/打断列表项并通过替换列表项中的文本来添加类，示例如下？

原始 HTML:

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

        <li><span class="label">texttwo</span> Test Content</li>
        <li><span class="label">textone</span> Test Content</li>
        <li><span class="label">textone</span> Test Content</li>
    </ul>
</div>

我试图像这样输出:

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

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

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

我试图将它分成多个组，并通过替换 class="label" 中的文本将类添加到新父 ul(输出 Html 示例)/p>

这是我尝试过的:

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()
  }))
})

不工作，请检查jsfiddle .
提前致谢。

Answer 1

这是一个解决方案，根据 .label

中的文本将 LI 移至新父级

var widget  = $('.widget-content'),
    ul      = widget.find('ul'),
    classes = ['left', 'right'];

ul.find('li').each(function() {
    var span   = $(this).find('.label');
    var text   = span.text();
    var parent = widget.find('[data-parent="'+text+'"]');
    
    if ( parent.length === 0 ) {
    	widget.append( $('<ul class="'+classes.shift()+'" data-parent="'+text+'" />').append(this) )
    } else {
    	parent.append(this)
    }
    ul.remove();
});

.left  {color: green}
.right {color: blue}

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

        <li><span class="label">texttwo</span> Test Content</li>
        <li><span class="label">textone</span> Test Content</li>
        <li><span class="label">textone</span> Test Content</li>
    </ul>
</div>