[英]insert LI to a UL from an existing UL using JQuery
I am having 2 UL and one button 我有2个UL和一个按钮
<ul class="droptrue ui-sortable" id="sortable1" style="min-height: 128px; mozuserselect: none;"
unselectable="on">
<li id="article_1" class="ui-state-default">
<input type="checkbox" id="1" />
Article #1</li>
<li id="article_2" class="ui-state-default">
<input type="checkbox" id="2" />
Article #2</li>
<li id="article_3" class="ui-state-default">
<input type="checkbox" id="3" />
Article #3</li>
</ul>
<ul class="droptrue ui-sortable" id="sortable2" style="min-height: 128px; mozuserselect: none;"
unselectable="on">
<li id="article_4" class="ui-state-default">
<input type="checkbox" id="4" />
Article #4</li>
<li id="article_5" class="ui-state-default">
<input type="checkbox" id="5" />
Article #5</li>
<li id="article_6" class="ui-state-default">
<input type="checkbox" id="6" />
Article #6</li>
</ul>
<input type="button" id="add" value=">>" style="width: 15px" onclick="AddToList()" />
now on button click i need to remove the corresponding li form "sortable1" and insert it into "sortable2" 现在在按钮上单击我需要删除相应的li形式“ sortable1”并将其插入“ sortable2”
I wrote the function like 我写的功能像
function AddToList() {
var vals = $('#sortable1 input:checkbox:checked').map(
function() {
$("#sortable2").append($(this).parent().html());
$(this).parent().remove();
return this.id;
}).get().join(',');
}
but this function removes the li but adding only the checkbox into the other ul. 但是此功能删除了li,但仅将复选框添加到另一个ul中。 if i give $(this).parent().parent().html() which adds all the li to the other ul.Please tell me what i am missing here?
如果我给$(this).parent()。parent()。html()将所有li加到另一个ul。请告诉我我在这里缺少什么?
Use appendTo
method. 使用
appendTo
方法。
var vals = $('#sortable1 input[type=checkbox]:checked').map(function() {
$(this).parent().appendTo('#sortable2');
return this.id;
}).get().join(',');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.