Using JQuery to split a in 2

问题

Hi I have a list of unordered elements. When clicked I would like to insert a  element whilst splitting the <ul> in 2.

The problem being that $("</ul>"+text+"<ul class=\"test\">").insertAfter(element); seems to separate the  element from the <ul> elements, inserting the  first then the <ul> tags.

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  element: $('.temp').remove();

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

回答1:

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.

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.

For example:

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

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

DEMO

回答2:

highly recommend .nextAll() to get the siblings after what is clicked on. .detach() will remove them from the dom, and they can be moved then (it also keeps the click event registered to it). I append the  you wanted, then append a cloned ul after the text. 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);
}

});

回答3:

jQuery (and JavaScript) work with the DOM, not with HTML tags. Don't be confused by the $("<tag>") syntax; it's still DOM nodes that are being created, appended, and the like.

Therefore, you would have to create a new $("") and append it to the body and append the created ul to that.

As for getting the <li>s you want, you can use the length of the $("ul li") collection divided in half.

Working example: http://jsfiddle.net/yU65g/2/

回答4:

Add p and a new ul after the original ul

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

来源：https://stackoverflow.com/questions/15015342/using-jquery-to-split-a-ul-in-2

标签

jquery

insert

html-lists

indexing

Using JQuery to split a <ul> in 2

问题

回答1:

回答2:

回答3:

回答4: