0

嗨，我有一个无序元素列表。单击时，我想<p>在拆分<ul>2 时插入一个元素。

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

我还想立即删除元素<ul>之前和之后的打开和关闭，以便我可以在不同的位置拆分。这是我能找到的唯一方法，但它只删除了元素：.temp<ul><p>$('.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;}
4

4 回答 4

2

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

演示

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

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

演示

于 2013-02-22T01:40:05.253 回答
1

强烈推荐.nextAll()在点击后获取兄弟姐妹。 .detach()会将它们从 dom 中删除，然后可以移动它们（它还保持向其注册的 click 事件）。我附加<p>你想要的，然后在文本后附加一个克隆的 ul 。 小提琴

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

});
于 2013-02-22T01:38:25.837 回答
0

jQuery（和 JavaScript）与DOM一起工作，而不是与 HTML 标签一起工作。不要被$("<tag>")语法迷惑；它仍然是正在创建、附加等的 DOM 节点。

因此，您必须创建一个新$("<p>")的并将其附加到主体并将创建的 ul 附加到该主体。

至于得到<li>你想要的 s，你可以使用$("ul li")集合的长度分成两半。

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

于 2013-02-22T01:32:49.260 回答
0

在原来的 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

于 2013-02-22T02:30:08.850 回答