Question

我正在尝试在jquery中使用.append函数。我有一个带有li元素的div。他们有不同的课程，可以说是赔率和均衡。我希望李的班级“奇怪”进入另一个div里面。我怎样才能做到这一点？这是我的设置：修改即可。这是有效的标记，我只是没有把所有内容。现在修复其他人。

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

然后输出为：

<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

如果您已经将<div>元素移动到元素中，则可以尝试：

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

工作示例：

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

Answer 2

您的<li>必须包含在列表<ol>或<ul>中。

首先，添加<div id="col2">，但该div还必须包含<ul>或<ol>才有效。然后将奇数<li>附加到新列表。

// 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

假设你有像这样的有效html结构：

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

这里是jQuery代码：

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

修改：.detach()的使用不是强制性的。

将具有特定类的li元素移动到div中

3 个答案: