在兩個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示例）中

這是我嘗試過的：

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> 

Answer 2

按照您的代碼（相同的原理），這是另一種解決方案：

 var $widget = $('.widget-content'); var elements = {}; $widget.find('li').each(function () { var key = $(this).find('span').text(); // If key is not defined yet, we define an Array elements[key] = typeof elements[key] === 'undefined' ? [] : elements[key]; // Adds the content of the <li> elements[key].push($(this).text()); }).parent().remove(); // Clears the <ul> $.each(elements, function(index, values) { var $ul = $('<ul/>').addClass(index); $.each(values, function () { $ul.append($('<li/>').text(this)); }); $widget.append($ul); }); 

  .textone { color: red; } .texttwo { 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> 

Answer 3

jQuery wrapAll()是另一種簡短而甜美的方法。

// get unique texts
var uniTxt = [];
$('.label').text(function(index,txt){
  ( $.inArray(txt,uniTxt) > -1) ? null : uniTxt.push( txt ) ;
});

// rearrange items
$(uniTxt).each(function(index, className){
  $('li').filter(':contains('+className+')')
  .unwrap()                             // remove initial parent ul 
  .wrapAll('<ul class='+className+'>'); // wraps similar txt with a Ul & add class
});

觀看演示