[英]Wrap/Break list items in two ul
尝试换行/中断列表项并通过替换列表项中的文本来添加类,例如以下示例?
原始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()
}))
})
这是一个解决方案,根据.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>
按照您的代码(相同的原理),这是另一种解决方案:
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>
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
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.