CODEWITHSUNDEEP
jqueryajax
Inaccessible
Inaccessible

Reputation: 1560

get id of all child div jquery

Html code

<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>

I want to pass all child div IDS such as 1,11,12 via ajax.

This is my code.

$('#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',
    });
    });

I should pass all child div ids(1,11,12) under div(#nestable). How can i achieve this?

Upvotes: 1

Views: 1322

Answers (3)

Jorge Loureiro
Jorge Loureiro

Reputation: 458

You can do something like this:

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

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

alert(JSON.stringify(ids))

FIDDLE

Taking your sample:

$('#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',
        });
    });

Or:

$('#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',
            });
        });

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

Try this:

$('#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'
    });
});

Upvotes: 1

techfoobar
techfoobar

Reputation: 66663

Try this:

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

// childids is "1,11,12"

Demo

Upvotes: 0

Related Questions