在两个UL中的Wrap / Break列表项 [英] Wrap/Break list items in two ul

问题描述

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

原始HTML：

 < div class =widget-内容> 
< ul> 
< li>< span class =label> textone< / span>测试内容< / li> 
< li>< span class =label> texttwo< / span>测试内容< / li> 
< li>< span class =label> texttwo< / span>测试内容< / li> 
 
< li>< span class =label> texttwo< / span>测试内容< / li> 
< li>< span class =label> textone< / span>测试内容< / li> 
< li>< span class =label> textone< / span>测试内容< / li> 
< / ul> 
< / div> 
  

我尝试使输出如下所示：

 < div class =widget-content> 
< ul class =textone> 
< li>< span class =label> textone< /跨度>测试内容< / li> 
< li>< span class =label> textone< /跨度>测试内容< / li> 
< li>< span class =label> textone< /跨度>测试内容< / li> 
 
< / ul> <！ - 中断部分1  - > 
 
< ul class =texttwo> 
 <！ -  Break part 2  - > 
< li>< span class =label> texttwo< /跨度>测试内容< / li> 
< li>< span class =label> texttwo< /跨度>测试内容< / li> 
< li>< span class =label> texttwo< /跨度>测试内容< / li> 
< / ul> 
< / div> 
  

我试图将它分成多个组，并将类添加到新的父<$ c $通过替换来自 class =label

的文本，输出 p>这是我试过的：

  var arr = []; // array来存储`li`元素
 var widget = $（。widget-content）; 
 $ b $（。widget-content li）。each（function（index，el）{
 var html = el.outerHTML; 
 // label at`label` text（）。trim（）。slice（-1）; 
 if（arr [curr  -  1]）{
 arr [curr  -  1] .push（html）
} else {
 arr [curr  -  1] = [html]; 
} 
}）; 
 
 widget.html（）; //删除现有的`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 。


提前致谢

解决方案

这是一个解决方案，将LI移至新父母，基于 .label

中的文字 $ b

var widget = $（'。widget （'）'，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>测试内容< / li> < li>< span class =label> texttwo< / span>测试内容< / li> < li>< span class =label> texttwo< / span>测试内容< / li> < li>< span class =label> texttwo< / span>测试内容< / li> < li>< span class =label> textone< / span>测试内容< / li> < li>< span class =label> textone< / span>测试内容< / li> < / div>  

Trying to Wrap/Break list items and add class by replace text from list items, example below?

Original 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>

I trying to make Output like this:

<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>

I'm trying to split it in to multiple groups and add class to new parent ul(output Html example) by replace text from class="label"

Here is what I tried:

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

Not working, Please check jsfiddle.
Thanks in advance.

解决方案

Here's one solution, moving the LI's to new parents, based on the text in .label

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中的Wrap / Break列表项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！