Question

我有两个可排序的列表，然后是一个按钮。用户将项目从第一个列表添加到第二个列表，然后当他们单击按钮时，我有一些脚本从第二个列表中收集列表项ID。这部分按预期工作。

当用户意外地将项目添加到要删除的第二个列表时，我的问题就来了。我有一个垃圾桶图标，用于从列表中删除项目，但是当您点击按钮获取数组时，它仍然包括数组中已删除的列表项。我该如何避免这种情况？我是否应该在添加和删除项目的同时构建数组，或者只是在完成移动列表项目之后才构建它一次就像我在这里做的那样？

谢谢你看看！

http://jsfiddle.net/vYu5k/

    <div class="avail_segments_wrap">
    <ul id="available" class="segments_available">Available Segments
        <li id="1"><span class="title">Item 1</span><a href="#" class="ui-icon ui-icon-add"></a></li>
        <li id="2"><span class="title">Item 2</span><a href="#" class="ui-icon ui-icon-add"></a></li>
        <li id="3"><span class="title">Item 3</span><a href="#" class="ui-icon ui-icon-add"></a></li>
        <li id="4"><span class="title">Item 4</span><a href="#" class="ui-icon ui-icon-add"></a></li>
        <li id="5"><span class="title">Item 5</span><a href="#" class="ui-icon ui-icon-add"></a></li>
        <li id="6"><span class="title">Item 6</span><a href="#" class="ui-icon ui-icon-add"></a></li>
    </ul>
</div>

<br>

<div class="chosen_segments_wrap">
    <ul id="chosen" class="segments_chosen">Chosen Segments
    </ul>
</div>

<button type="button" id="button1">Button1</button>

jquery的：

//make lists sortable
$("#available").sortable({
    connectWith: "#chosen"
});
$("#chosen").sortable({
    connectWith: "#available"
});

//make add and trash icons functional
$('.ui-icon-add, .ui-icon-delete').on('click', function() {
    item = $(this).parent();
    item.fadeOut(function() {
        if (item.parent().attr('id') == 'chosen') {
            $('#available').remove(item.fadeIn());

        } else {
            $('#chosen').append(item.fadeIn());
        }
    });
});

//hit button to collect all li id's from ul "chosen".
$("#button1").click( function()
           {
             var chosenArray = [];
                $('#chosen li').each(function(){
                chosenArray.push($(this).attr('id'));
                    });
               alert(chosenArray)
           }
        );

Answer 1

Fiddle Demo

$("#button1").click(function () {
    var chosenArray = [];
    $('#chosen li:visible').each(function () {

<小时/> 您正在隐藏li上的删除。但是当您创建数组时，您将获取所有li个元素

您只需选择可见元素$('#chosen li:visible').

阅读:visible

从仍在数组中显示的可排序列表中删除了项目

1 个答案: