通过将文本替换为类来换行/拆分列表元素 [英] Wrap/Break List elements by replace text to class
问题描述
我的问题是如何通过从列表项文本中添加类查找来包装/拆分列表项,示例如下?
我的相关问题在这里:按类名包装列表元素
我想像这样分解列表项:
我的意思是将列表项分成两部分,例如第二个 HTML 示例.通过替换上面给出的 class="label"
示例(第二个 HTML)中的文本查找,将类添加到父 ul
.
我怎样才能简单地通过 jQuery/JS 做到这一点?这是我尝试过的:
$(".widget-content").each(function() {var $li = $(this).find("li").unwrap();//unwrap 移除旧的 UL 包装器var uniq = [];//创建一组独特的label*"类:$li.find("[class^=label]").attr("class", function(i, v) {if (!~$.inArray(v, uniq)) uniq.push(v);});//将 LI 按 A 类分组,并包装成具有相同类的新 UL$.each(uniq, function(i, klas) {$("a." + klas).closest("li").wrapAll($("<ul/>", {班级:克拉斯}));});});
提前致谢.
你可以使用 .each()
, $.each()
, .html()
, .text()
, .trim()
var arr = [];//存储`li`元素的数组var widget = $(".widget-content");$(".widget-content li").each(function(index, el) {var html = el.outerHTML;//`label` 文本中的数字var curr = $(".label", this).text().trim().slice(-1);如果 (arr[curr - 1]) {arr[curr - 1].push(html)} 别的 {arr[curr - 1] = [html];}});小部件.html("");//删除现有的`html`$.each(arr, function(key, val) {var li = val.join("");$(".widget-content").append($("
", {html:李,"class":$(li).eq(0).find(".label").text().trim()}))})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"><div class="widget-content"><ul><li><span class="label">demo-text1 </span>测试内容<li><span class="label">demo-text2 </span>测试内容<li><span class="label">demo-text1 </span>测试内容<li><span class="label">demo-text2 </span>测试内容<li><span class="label">demo-text1 </span>测试内容<li><span class="label">demo-text2 </span>测试内容
My question is how to Wrap/Break list items by add Class find from list items text, example below?
My related question here: Wrap List elements by class name
<div class="widget-content">
<ul>
<li><span class="label"> demo-text1 </span> Test Content</li>
<li><span class="label"> demo-text2 </span> Test Content</li>
<li><span class="label"> demo-text1 </span> Test Content</li>
<li><span class="label"> demo-text2 </span> Test Content</li>
<li><span class="label"> demo-text1 </span> Test Content</li>
<li><span class="label"> demo-text2 </span> Test Content</li>
</ul>
</div>
I want to break list items like this:
<div class="widget-content">
<ul class="demo-text1">
<li><span class="label"> demo-text1 </span> Test Content</li>
<li><span class="label"> demo-text1 </span> Test Content</li>
<li><span class="label"> demo-text1 </span> Test Content</li>
</ul> <!-- Break part 1 -->
<ul class="demo-text2">
<!-- Break part 2 -->
<li><span class="label"> demo-text2 </span> Test Content</li>
<li><span class="label"> demo-text2 </span> Test Content</li>
<li><span class="label"> demo-text2 </span> Test Content</li>
</ul>
</div>
I mean break list items in two parts like second HTML example. Add class to both parent ul
by replace text find from class="label"
example given above (second HTML).
How can I do this simply by jQuery/JS ? Here is what I tried:
$(".widget-content").each(function() {
var $li = $(this).find("li").unwrap(); // unwrap removes the old UL wrapper
var uniq = [];
// Create a collection of unique "label*" classes:
$li.find("[class^=label]").attr("class", function(i, v) {
if (!~$.inArray(v, uniq)) uniq.push(v);
});
// Group LI by A class, and wrap into a new UL with the same class
$.each(uniq, function(i, klas) {
$("a." + klas).closest("li").wrapAll($("<ul/>", {
class: klas
}));
});
});
Thanks in advance.
You can use .each()
, $.each()
, .html()
, .text()
, .trim()
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()
}))
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="widget-content">
<ul>
<li><span class="label"> demo-text1 </span> Test Content</li>
<li><span class="label"> demo-text2 </span> Test Content</li>
<li><span class="label"> demo-text1 </span> Test Content</li>
<li><span class="label"> demo-text2 </span> Test Content</li>
<li><span class="label"> demo-text1 </span> Test Content</li>
<li><span class="label"> demo-text2 </span> Test Content</li>
</ul>
</div>
这篇关于通过将文本替换为类来换行/拆分列表元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!