Question

如何从无序列表中删除对象并将其添加到另一个列表中，同时保留其位置？我知道我可以将原始项目设置为hide（）但是然后会留下项目用来显示的小空间。假设我有一个列表A和B，如果用户点击A中的项目，则需要将其添加到B并从A中删除。如果他们现在单击按钮将其从B中删除并返回到A，我想要让它显示在原来的相同位置。我知道我可以通过append（）添加它但不会将它放在同一个位置。有谁想？

Answer 1

你可以使用.clone吗？这样：

<ul id="firstlist">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
</ul>

<ul id="secondlist">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

jquery：

var object = $('#firstlist > li :last ').clone();
$('#secondlist').append(object);
$('#firstlist > li :last ').destroy();

显然你可以交换这一轮将它添加到第一个列表中，但为了获得你可以使用多种方式的位置，我可能会这样做：

$('#firstlist').children('li').each(function(i){

});

并使用“i”获得该职位。您可以在给定对象之后追加：

$('#firstlist').children('li').each(function(i)
 { if(i== 4){ $(this).append(object).after(this) }

Answer 2

以下我的出价：

允许您点击 list-1 中的元素，它会隐藏该实例，并将克隆附加到 list-2 。
点击 list-2 中的项目会将其返回 list-1 ，位于相同位置。
点击 list-2 中的“原始元素”不会复制到 list-1 。

HTML：

<ul id="list-1">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
<ul id="list-2"></ul>

JavaScript的：

var $list1 = $('#list-1');
var $list2 = $('#list-2');
$list1.children('li').each(function(i,e){
    var ulId = $(this).closest('ul').attr('id');
    $(this).attr('li-id',ulId+'_'+i);
}).click(function(e){
    if ($list2.find('li[li-id="'+$(this).attr('li-id')+'"]').length == 0){
        var liClone = $(this).clone();
        liClone.click(function(e){
            var elId = $(this).attr('li-id');
            $list1.find('li[li-id="'+elId+'"]').show();
            $(this).remove();
        });
        $list2.append(liClone);
    }
    $(this).hide();
});

小提琴：http://www.jsfiddle.net/vgx23/1/

jQuery删除一个对象并替换在同一个地方

2 个答案: