将列表项换行/拆分为两个 ul
Wrap/Break list items in two ul
尝试通过替换列表项中的文本来换行/断开列表项并添加类,示例如下?
原始网页:
<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。
提前谢谢。
这是一个解决方案,根据.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
});
查看演示
相关文章:
- JQuery合并了keyup和focusout两个函数
- 如何使用 node.js 比较两个 json 数组
- 为复选框javascript指定两个值
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- 单击时切换两个图像
- 我可以'我似乎不知道如何修复javascript中的两个lint.有人能帮我理解吗
- 基于两个条件退出While循环
- 如何在这里将两个值最低的数字相加
- 组合两个javascript函数
- 如何使用offer/answer交换来自两个对等连接的流
- jsf中两个字符串的颜色代码差异
- 加载两个具有相同父密钥名称的json文件
- 如何将两个UL与JQuery合并,以便值交替
- 将列表项换行/拆分为两个 ul
- 在两个或多个 UL 列表之间切换,如果单击一个列表,则其他列表会自动以初始状态返回,就像从未单击过一样
- 如何使用javascript在ul中每隔两个li插入一次
- 在JavaScript中查找两个JSON数组之间匹配的JSON项,并将CSS应用于UL列表中的匹配项
- 使用js同时显示两个ul选项卡
- 在ul的末尾添加两个li元素
- 我有一个有5个li的ul,两边各有两个li,然后我要做下面的操作