Question

嘿，我的名单很少：

<ul id="selectable">
<li id='id.00'></li>
<li id='id.10'></li>
<li id='id.20'></li>
<li id='id.30'></li>
<li id='id.40'></li>
<li id='id.50'></li>
<li id='id.60'></li>
<li id='id.70'></li>
<li id='id.80'></li>
<li id='id.90'></li>
</ul

我可以使用css选择一个或多个听众：

ul {overflow:hidden;}
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: black; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 300px; }
#selectable li {float: left; width: 30px; height: 20px; background-color: none; display:block; }

现在我想使用jquery保存所有选定元素的id：

$(function() {
    $( "#selectable" ).selectable({
        stop: function() {
            var result = $( "#select-result" ).empty();
            $( ".ui-selected", this ).each(function() {
                var index = $(this).attr('id');
                result.append( index );
                alert(index);
            });
        }
    });
});

好到目前为止很好：当我选择例如四个标题，它们被标记，但是：只保存最后一个标识。例如，当我选择这个听众时：

<li id='id.00'></li>
<li id='id.10'></li>
<li id='id.20'></li>
<li id='id.30'></li>

只有id：“id.30”在我的变量“index”中被保护。我怎样才能让我的jquery保护所选元素的所有id而不仅仅是最后一个？问候！

Answer 1

尝试.map()

var result = $(".ui-selected", this).map(function () {
    return this.id;
}).get();

注意：这将返回array

<小时/> 如果您想使用字符串.join()

var result = $(".ui-selected", this).map(function () {
    return this.id;
}).get().join(',');

OP发表评论后更新

fiddle Demo

$(function () {
    $("#selectable").selectable({
        stop: function () {
            var result = $(".ui-selected", this).map(function () {
                return this.id;
            }).get().join(',');
            $('#select-result').html(result);
        }
    });
});

保存所选元素的id

1 个答案: