[英]moving li from one ul to another jQuery
我正在嘗試將列表項從一個無序列表移動到另一個列表。 這在第一次工作正常,但一旦項目被移動,我無法將它們移回。 我做了一個小提琴來說明我在說什么。
在這里查看 - > jsfiddle
HTML
<table>
<tr>
<td>Numbers</td>
<td>Letters</td>
</tr>
<tr>
<td>
<ul class='list1'>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</td>
<td>
<ul class='list2'>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</li>
</ul>
</td>
</tr>
</table>
<input type='button' value='<<' id='move_left' />
<input type='button' value='>>' id='move_right' />
jQuery的
$('body').on('click', 'li', function() {
$(this).toggleClass('selected');
});
$('#move_left').click(function() {
$('.list1').append('<li>', $('.list2 .selected').text(), '</li>');
$('.list2 .selected').remove();
});
$('#move_right').click(function() {
$('.list2').append('<li>', $('.list1 .selected').text(), '</li>');
$('.list1 .selected').remove();
});
CSS
ul {
list-style-type:none;
padding:0px;
margin:0px;
}
.selected {
background-color:#efefef;
}
正如您所看到的那些項目從左向右或從右向左移動,但一旦移動它們就無法將它們移回。 任何幫助表示贊賞。
它比你想象的容易:
$('#move_left').click(function() {
$('.list1').append($('.list2 .selected').removeClass('selected'));
});
$('#move_right').click(function() {
$('.list2').append($('.list1 .selected').removeClass('selected'));
});
將現有元素追加到另一個元素時,它會移動到那里。 無需克隆元素並手動刪除原始文件。
嘗試:
$('#move_left').click(function() {
$('.list2 .selected').each(function(){
$('.list1').append('<li>'+$(this).text()+'</li>');
});
$('.list2 .selected').remove();
});
$('#move_right').click(function() {
$('.list1 .selected').each(function(){
$('.list2').append('<li>'+$(this).text()+'</li>');
});
$('.list1 .selected').remove();
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.