Using jQuery to retrieve IDs of several DIVs and store in an array

Question

I'm currently working on a "template" creation system with html, jQuery and PHP. So the interface is very basic, buttons that currently add divs, these divs are to have content such as buttons, textareas, checkboxes and such.

When I click a button, the div is added; now i also want to store this new div ID into an array with jQuery and at the same time output this array into a separate div with the ID of overview.

My current script looks like this:

function getSteps() {
        $("#template").children().each(function(){
            var kid = $(this);
            //console.log(kid.attr('id'));
            $('div.overview').append(kid.attr('id'))
        });
    }

    $('button').on('click', function() {
        var btnID = $(this).attr('id');
        $('<div></div>', {
            text: btnID,
            id: btnID,
            class: item,
        }).appendTo('div.template');
    });

    $(document).ready(function() {
        getSteps();
    });

Now, the function getSteps is where I want to retrieve the ID's of all my divs and store them into an array. When I click one of my buttons, I want them to add a div with an ID into my #template div.

I get an error in my console in chrome:

Uncaught ReferenceError: item is not defined
(anonymous function)createtemplate.php:111
f.event.dispatchjquery.min.js:3
f.event.add.h.handle.i

I'm a bit lost and would love a push into the right direction. Thank you.

Can you reproduce a live demo to reproduce your problem at JS Fiddle, using your rendered HTML? — David Thomas
– David Thomas, Commented Feb 25, 2012 at 12:41

Nicola Peluchetti · Accepted Answer · 2012-02-25 12:41:51Z

3

You could do (to retrieve the ID's of all the divs and store them into an array. )

function getSteps() {
    var ids = [];
    $("#template").children().each(function(){
        ids.push(this.id);
    });
    return ids;
}

$(document).ready(function() {
   var arrayOfIds = getSteps();
});

answered Feb 25, 2012 at 12:41

Nicola Peluchetti

77k32 gold badges150 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pimvdb Over a year ago

You can also use .map(...).get() to map elements to their IDs.

mariogl · Accepted Answer · 2012-02-25 13:06:48Z

You get that error because you're trying to use a variable called item that doesn't exist. I guess you want to give a class called item, in which case you should write

class:"item",

Also, you're appending the new divs to a element with class "template", and your getSteps function is searching for an element with id "template".

Think that with your code, the getSteps function executes once, when the DOM is ready. If you want to refresh the list of id's every time you add a div, you should do it inside your code for click event:

function getSteps() {
    $('div.overview').empty();
    $(".template").children().each(function(){
        var kid = $(this);
        //console.log(kid.attr('id'));
        $('div.overview').append(kid.attr('id'))
    });
}


$(document).ready(function() {

    $('button').on('click', function() {
        var btnID = $(this).attr('id');
        $('<div></div>', {
            text: btnID,
            id: btnID,
            class: 'item',
        }).appendTo('div.template');
        getSteps();
    });

});

Collectives™ on Stack Overflow

Using jQuery to retrieve IDs of several DIVs and store in an array

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related