Question

嗨，我有一个无序元素列表。点击后，我希望在将拆分为2时插入<ul>元素。

问题是$("</ul>"+text+"<ul class=\"test\">").insertAfter(element);似乎将元素与<ul>元素分开，先插入然后插入<ul>标记。

我还想在<ul>元素之前和之后立即删除开始和结束.temp，以便我可以将<ul>拆分到不同的位置。这是我能找到的唯一方法，但它只删除元素：$('.temp').remove();

在此开始时格式化页面的方式正是我所追求的。 JS有点破碎。 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;}

Answer 1

使用DOM时，“标签”并不存在。 jQuery解析HTML字符串并尽可能地从中创建DOM元素，然后将它们插入到树中。

因此，考虑到DOM元素，“拆分”意味着您必须采用以下所有li元素（如果有）并将它们移动到新列表。

例如：

$(".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);
});

DEMO

如果您只想将所有元素拆分为两个列表，假设两个列表都已存在，则以下内容将起作用：

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

DEMO

Answer 2

强烈建议.nextAll()在点击后点击兄弟姐妹。 .detach()会将它们从dom中移除，然后可以移动它们（它还会保持向其注册的click事件）。我追加你想要的，然后在文本后附加一个克隆的ul。 fiddle

$(".test li").click(function () {
  var copied = $(this).nextAll().detach(), ul = $(this).closest("ul"), copyUl = ul.clone().empty().append(copied), test = $("<p>Test</p>",{"class":"temp"}); 
if(copied.length > 0){
  ul.after(test);
  test.after(copyUl);
}

});

Answer 3

jQuery（和JavaScript）使用 DOM ，而不是使用HTML标记。不要被$("<tag>")语法混淆;它仍然是正在创建，附加等的DOM节点。

因此，您必须创建一个新的$("")并将其附加到正文并将创建的ul附加到该正文。

至于获得所需的<li>，您可以将$("ul li")集合的长度分成两半。

工作示例：http://jsfiddle.net/yU65g/2/

Answer 4

在原始ul

之后添加p和新的ul

JS

var li = $('#myul li');
$('body')
    .append($('<p>p</p>'))
    .append($('<ul/>')
    .append(li.slice(li.length/2)));

HTML

<ul id="myul">
  <li>a</li>
  <li>b</li>
  <li>c</li>
  <li>d</li>
  <li>e</li>
  <li>f</li>
</ul>

http://codepen.io/anon/pen/qKmae

使用JQuery拆分<ul> in 2 </ul>

4 个答案: