jquery - 获取所有子div jquery的id

Question

html代码

<div class="dd" id="nestable">
            <ol class="dd-list">
                <li class="dd-item" data-id="1">
                    <div class="dd-handle" id="1">Item 1</div>
                </li>
                <li class="dd-item" data-id="11">
                    <div class="dd-handle" id="11">Item 11</div>
                </li>
                <li class="dd-item" data-id="12">
                    <div class="dd-handle" id="12">Item 12</div>
                </li>
            </ol>
 </div>

我想通过所有child div IDS诸如1,11,12通过ajax。

这是我的代码。

$('#nestable').nestable({
        group: 1
    })
    .on('change', updateOutput,function(event){
     var a=$("#nestable :first-child").attr('id');
     $.ajax({
     url: 'drag',
     data: {sorted_list: $(this).text()},
     datatype: 'json',
    });
    });

我应该在 div(#nestable) 下传递所有子 div id(1,11,12)。我怎样才能做到这一点？

Answer 1

尝试这个：

$('#nestable').nestable({
    group: 1
})
.on('change', updateOutput,function(event){
    var childIds = $('.dd-list div', this).map(function() {
        return this.id;
    });

    $.ajax({
        url: 'drag',
        data: { sorted_list: childIds },
        datatype: 'json'
    });
});

Answer 2

你可以这样做：

var ids = [];
var $childDivs = $(".dd div.dd-handle");

$($childDivs).each(function(){
    ids.push($(this).attr("id"));
});

alert(JSON.stringify(ids))

小提琴

取样：

$('#nestable')
    .nestable({ group: 1 })
    .on('change', updateOutput, function(event){
         var a=$("#nestable :first-child").attr('id');
         $.ajax({
             url: 'drag',
             data: {
                 sorted_list: $(this).text(),
                 ids: function(){
                     var ids = [];
                     var $childDivs = $(".dd div.dd-handle");

                     $($childDivs).each(function(){
                         ids.push($(this).attr("id"));
                     });
                     return ids;
                 }
             },
             datatype: 'json',
        });
    });

或者：

$('#nestable')
        .nestable({ group: 1 })
        .on('change', updateOutput, function(event){
             var a=$("#nestable :first-child").attr('id');
             $.ajax({
                 url: 'drag',
                 data: {
                     sorted_list: $(this).text(),
                     ids: $(".dd div.dd-handle").map(function(x, y) {
                               return y.id;
                          }).toArray()
                 },
                 datatype: 'json',
            });
        });

Answer 3

尝试这个：

var childids = $('#nestable .dd-handle').map(function(x, y) {
    return y.id;
}).toArray().join(',');

// childids is "1,11,12" 

演示