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

【问题标题】：Removed item from sortable list still showing in array从可排序列表中删除的项目仍显示在数组中
【发布时间】：2014-04-09 10:25:47
【问题描述】：

我有两个可排序的列表，然后是一个按钮。用户将第一个列表中的项目添加到第二个列表中，然后当他们单击按钮时，我有一些脚本从第二个列表中收集列表项 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)
           }
        );

【问题讨论】：

标签： javascript jquery arrays jquery-ui jquery-ui-sortable

【解决方案1】：

Fiddle Demo

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

您在删除时隐藏了li。但是当您创建数组时，您将获取所有 li 元素

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

阅读:visible

【讨论】：