Question

这里我将整个li元素从一个列表移动到另一个列表。我需要的是从一个列表中选择一个特定的li元素，然后在按钮上单击它必须移动到另一个列表。这是我的代码

$(document).ready(function () {
    $("#add").click(function () {
        $("#list1 li").appendTo('#list2');
    });
});

和

<div>
    <asp:ListView ID="ListView1" runat="server">
        <LayoutTemplate>
            <ul id="list1" class="connectedSortable">
                <asp:PlaceHolder runat="server" id="itemPlaceholder"></asp:PlaceHolder>
            </ul>
        </LayoutTemplate>
        <ItemTemplate>    
            <li class="ui-state-default" ><%# Eval("value") %></li>     
        </ItemTemplate>
    </asp:ListView>

    <asp:ListView ID="ListView2" runat="server">
        <LayoutTemplate>
            <ul id="list2" class="connectedSortable">
                <asp:PlaceHolder runat="server" id="itemPlaceholder"></asp:PlaceHolder>
            </ul>
        </LayoutTemplate>
        <ItemTemplate>    
            <li class="ui-state-highlight" ><%# Eval("value2") %></li>     
        </ItemTemplate>
    </asp:ListView>
    <input id="add" name="add" type="button" value="add" /><br />
</div>

有什么建议吗？

Answer 1

试试这个：http://jsfiddle.net/jKvZB/2/

list 1:
<ul id="list1">
    <li>hello</li>
    <li>world</li>
</ul>
<br />
list 2:
<ul id="list2">
    <li>goodbye</li>
</ul>

<a href="#" id="listSwap">go</a>


$(document).ready(function() {
    $("#listSwap").click(function() {
        $("#list1 li:nth-child(2)").hide();
        $("#list2").append("<li>"+$("#list1 li:nth-child(2)").html()+"</li>");
    });
});

这很基本，但我相信你可以从那里开始工作。

Answer 2

听起来像是last()的工作。

$(document).ready(function () {
    $("#add").click(function () {
        $("#list1 li").last().appendTo('#list2');
    });
});

编辑：移动特定项目：

$("#list1 li").click(function() {
    $(this).appendTo('#list2');
});

附加编辑：使列表项可单击，然后在单击“添加”按钮（未测试）时附加该项目。

$("#list1 li").click(function() {
    $("list1 li.clicked").removeClass("clicked");
    $(this).addClass("clicked");
});
$("#add").click(function () {
    $("#list1 li.clicked").removeClass("clicked").appendTo('#list2');
});

Answer 3

如果你只是移动一个li li元素，你应该为每个li元素都有一个唯一的属性，然后使用jquery selector函数来选择一个并附加到其他元素。

这可能对您有所帮助：

<ul id="list1">
    <li class="ui-state-default 01"> list1-1</li>
    <li class="ui-state-default 02"> list1-2</li>
    <li class="ui-state-default 03"> list1-3</li>
</ul>
<ul id="list2"></ul>

    $("#list1 .01").appendTo($("#list2"));
    or 
    $("#list1 li:last").appendTo($("#list2"));

类似于戴夫的回答。

Answer 4

<script type="text/javascript">
    $(document).ready(function () {
        $(".add").click(function () {
            $(this).appendTo('#list2');
        });
    });
</script>

这将使得点击任何特定的li元素是将被移动的元素。只要确保li有“add”类

如何将li元素从一个列表移动到另一个列表

4 个答案: