使用JQuery拆分< ul>在2 [英] Using JQuery to split a <ul> in 2
问题描述
我有一个无序元素列表.单击后，我想插入一个< p> 元素，同时将< ul> 拆分为2.
Hi I have a list of unordered elements. When clicked I would like to insert a <p> element whilst splitting the <ul> in 2.
问题是 $(</ul>" + text +< ul class = \" test \>").insertAfter(element); 似乎将< ul> 元素中的< p> 元素，先插入< p> ，然后再插入< ul>.标记.
The problem being that $("</ul>"+text+"<ul class=\"test\">").insertAfter(element); seems to separate the <p> element from the <ul> elements, inserting the <p> first then the <ul> tags.
我还想删除 .temp 元素前后的开始和结束< ul> ，这样我就可以拆分< ul> 在其他位置.这是我可以找到的唯一方法，但是它只删除了< p> 元素: $('.temp').remove();
I would also like to remove the opening and closing <ul> immediately before and after the .temp element so I can split the <ul> in different spot. This was the only method I could find but it only removes the <p> element: $('.temp').remove();
此页开头的格式化方式正是我所追求的.JS有点破. http://jsfiddle.net/yU65g/1/
The way the page is formatted at the start of this is exactly what I'm after. The JS is just bit broken. http://jsfiddle.net/yU65g/1/
JS:
$(".test li").click(function () {
var text = "<p class=\"temp\">Test</p>";
var index = $(".test li").index(this);
$("span").text("That was div index #" + index);
var element = $('.test li').get(index);
$('.temp').remove();
$("</ul>"+text+"<ul class=\"test\">").insertAfter(element);
});
HTML:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<span>Click a div!</span>
<ul class="test">
<li>First div</li>
<li>Second div</li>
<li>Third div</li>
</ul>
<p class="temp">Test</p>
<ul class="test">
<li>Fourth div</li>
<li>Fith div</li>
<li>Sixth div</li>
</ul>
</body>
</html>
CSS:
.test li { background:yellow; margin:5px; }
span { color:red; }
.test {border: solid 1px red; clear:both; margin: 1em;}
.temp {clear:both;}
推荐答案
使用DOM时，标签"实际上并不存在.jQuery解析HTML字符串，并尽最大可能从中创建DOM元素，然后将它们插入树中.
When working with the DOM, "tags" don't really exist. jQuery parses the HTML string and creates DOM elements out of them as best as it can and then inserts them into the tree.
因此，考虑到DOM元素，拆分"意味着您必须采用以下所有 li 元素(如果有)并将它们移至新列表.
So, with DOM element in mind, "splitting" means that you have to take all of the following li elements (if there are any) and move them to a new list.
例如:
$(".test li").click(function () {
$("span").text("That was div index #" + $(this).index());
var $ul = $(this).parent(); // the current list (the parent `ul` element)
var $following = $(this).nextAll('li'); // all following `li` elements
if ($following.length > 0) {
// Create a new list, append the `li` elements and add the list
// after the current list
$('<ul />', {'class': 'test'}).append($following).insertAfter($ul);
}
// add a paragraph after the current list
$('.temp').remove();
$('<p />', {'class': 'temp',text: 'Test'}).insertAfter($ul);
});
如果您只想将所有元素拆分为两个列表，则假设两个列表都已存在，则以下操作将起作用:
If you only want to split all elements into two lists, the following will work, assuming both lists already exist:
var $uls = $("ul.test");
var $lis = $uls.find("li");
$lis.click(function () {
var index = $lis.index(this);
$("span").text("That was div index #" + index);
var $following = $lis.slice(index + 1); // get all following `li` elements
if ($following.length > 0) {
// append to second list
$uls.eq(1).append($following);
}
// append all li elements up to the current one to the
// first list
$uls.eq(0).append($lis.slice(0, index + 1));
// add a paragraph after the first list
$('.temp').remove();
$('<p />', {'class': 'temp',text: 'Test'}).insertAfter($uls.eq(0));
});
这篇关于使用JQuery拆分< ul>在2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
