ajax发布多个li元素

时间:2013-02-13 20:12:55

标签: jquery ajax

所以我有两个可排序列表。我想通过ajax将所有ID从一个列表发送到php脚本。此列表是动态的,ID的数量将发生变化。我只想收集所有的ID并将它们发送出去。

这是我到目前为止所做的,有些工作 - item_id var只抓取第一个,我想要它们全部 - 如果它的所有字符串用逗号/空格(无论如何)分隔,或者a新密钥=>每个的值......最简单的。

'roomID'是UL / Dialog的唯一标识符 - 工作正常。

$( 'div.edit-dialog-'+roomID ).dialog({ 
            autoOpen: false,
            height: 500,
            width: 550,
            modal: true,
            position:['middle','middle'],
            draggable: true,
            resizable: true,
            buttons: {
                Cancel: function() {
                    $( this ).dialog( "close" );
                },
                Save: function() {
                    $.ajax({
                        type: "POST",
                        data: {
                            room_id: roomID,
                            item_id: $("#sortable1-"+roomID+" li").attr("id")
                        },
                        url: "index.php?controller=AdminRegion&action=test",
                        success: function (res) {
                            $("#content").html(res);
                            $("#tabs").tabs();
                        }
                    });
                }

            },
                close: function() {
                    allFields.val( "" ).removeClass( "ui-state-error" );
                }
        });

结果:

array(2) { ["room_id"]=> string(1) "1" ["item_id"]=> string(1) "2" }

我认为这是语法问题,只是不知道如何。我的第二个猜测是循环?

1 个答案:

答案 0 :(得分:1)

$("#sortable1-"+roomID+" li")包含所有<li />元素,因此您必须对它们进行迭代才能获得每个元素的ID。

如果以逗号分隔的列表足够好,您可以使用

获取此列表
$("#sortable1-"+roomID+" li").map(function() {
    return this.id
}).get().join()

话虽如此,您的保存方法可以重写为

Save: function() {
    var item_ids = $("#sortable1-"+roomID+" li").map(function() {
        return this.id;
    }).get().join();

    $.ajax({
        type: "POST",
        data: {
            room_id: roomID,
            item_ids: item_ids
        },
        url: "index.php?controller=AdminRegion&action=test",
        success: function (res) {
            $("#content").html(res);
            $("#tabs").tabs();
        }
    });
}