在两个 ul 中换行/拆分列表项答案

【问题标题】：Wrap/Break list items in two ul在两个 ul 中换行/拆分列表项
【发布时间】：2016-03-12 20:29:45
【问题描述】：

试图通过替换列表项中的文本来包装/断开列表项并添加类，例如下面的示例？

原始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。
提前致谢。

【问题讨论】：

那么，您是想按每三项、一半或其他方式打破清单吗？不是很清楚
你确定它不是span的内容，因为它看起来是这样的
我想要像第二个 HTML 示例一样输出，通过替换文本内容从 span class="label" 获取类。检查第二个 HTML 示例。我想要。

标签： javascript jquery html replace

【解决方案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>

【讨论】：

嗨，想要简单的改变：如何给新父 ul.?不要从class="label"替换文本
我的意思是将不同的自定义类名称更改为不同的父 'ul'
那么你想用什么类名，你需要具体说明你想要什么
第一个ul 是类名left，第二个ul 是类名right
编辑答案以添加这些类，并使其更容易更改为您想要的任何内容

【解决方案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>

【讨论】：

如何给新父 ul.?不要从class="label"替换文本
只需将index 线上var $ul = $('<ul/>').addClass(index); 的值更改为pacific 类即可。
我的意思是将不同的自定义类名称更改为不同的父 'ul'

【解决方案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
});

See Demo

【讨论】：