将具有特定类的li元素移入和div

Question

I am trying to use the .append function in jquery. I have a div with li elements in it. They have different classes, lets say odds and evens. I would like the li's with the class "odd" moved into another div with li's in it. How can I do this? Here is my setup: Edit . This was in valid markup, I just didn't put all in. Fixed now for others.

<div id="col1">
    <ul>
    <li class="odd"></li>
    <li class="even"></li>
    <li class="odd"></li>
    <li class="even"></li></ul>
</div>
<div id="col2">
<ul>
<li></li>
</ul>
</div>

So then the output is:

<div id="col1">
    <li class="even"></li>
    <li class="even"></li>
    <li class="even"></li>
    <li class="even"></li>
</div>
<div id="col2">
    <li class="odd"></li>
    <li class="odd"></li>
    <li class="odd"></li>
    <li class="odd"></li>
</div>

Answer 1

If you already have <div> elements which you are moving elements into you can try this:

$("#col1 li").each(function(){
    var $li = $(this);
    if ($li.hasClass("odd")) $("#odd").append($li);
    if ($li.hasClass("even")) $("#even").append($li);
});

working example:

http://jsfiddle.net/hunter/jq8bW/

Answer 2

Your <li> must be contained inside a list <ol> or <ul> .

First, append <div id="col2"> , but that div must also contain a <ul> or <ol> to be valid. Then append the odd <li> to the new list.

// Create <div id='col2'><ul id='col2-list'></ul></div>
$("#col1").after("<div id='col2'><ul id='col2-list'></ul></div>");

// Place the list elements inside it.
$("li.odd").appendTo($("#col2-list"));

Answer 3

Let's say you have valid html structure like this one:

<ul id="col1">
    <li class="even"></li>
    <li class="odd"></li>
    <li class="odd"></li>
    <li class="even"></li>
</ul>
<ul id="col2">
</ul>

Here the jQuery code:

$('#col1 > .odd').each(function() {
    $(this).detach().appendTo('#col2');
});

Edit: the use of .detach() is not mandatory.