I am new to jQuery and hope someone can help me with this and also provide a short explanation so that I can apply it for similar cases in the future.

I have a large HTML page that is built dynamically. The page contains several tables with certain divs that are editable (contenteditable=true). These divs all have the class "editable".

Now I would like to create an array for all these divs that contains their id and their content (text).

So far I have the following which should create unique ids for these divs with an incrementing number but I am not sure on how to create the array for this. Also, just out of curiosity, is there a certain term how to call such arrays with two values per item ?

My jQuery:

$('#btnSave').on('click', function(){
    var i = 0;
    $(this).closest('form').find('div.editable').each(function(){
        $(this).attr('id', 'ed' + i+1);
        if( ($(this).text != '') && ($(this).text != ' ') ){
            $(this).addClass('edited');
        }
        i++;
    });
});

// my attempt for the array (perhaps the wrong approach):
var arrEdited = new Array();
$('div.edited').each(function(){
    arrEdited.push($.trim($(this).text()));
});

Many thanks in advance, Mike

I am new to jQuery and hope someone can help me with this and also provide a short explanation so that I can apply it for similar cases in the future.

I have a large HTML page that is built dynamically. The page contains several tables with certain divs that are editable (contenteditable=true). These divs all have the class "editable".

Now I would like to create an array for all these divs that contains their id and their content (text).

So far I have the following which should create unique ids for these divs with an incrementing number but I am not sure on how to create the array for this. Also, just out of curiosity, is there a certain term how to call such arrays with two values per item ?

My jQuery:

$('#btnSave').on('click', function(){
    var i = 0;
    $(this).closest('form').find('div.editable').each(function(){
        $(this).attr('id', 'ed' + i+1);
        if( ($(this).text != '') && ($(this).text != ' ') ){
            $(this).addClass('edited');
        }
        i++;
    });
});

// my attempt for the array (perhaps the wrong approach):
var arrEdited = new Array();
$('div.edited').each(function(){
    arrEdited.push($.trim($(this).text()));
});

Many thanks in advance, Mike

• javascript
• jquery
• arrays

• 1 not $(this).text , it should be $(this).text() – Pranav C Balan Commented Jun 4, 2015 at 7:37

3 Answers 3

I don't think you need another loop, instead you can put it inside your first loop, inside if( ($(this).text() != '') && ($(this).text() != ' ') ), then push an object to your array instead of a value.

var arrEdited = new Array();
$('#btnSave').on('click', function(){
    $(this).closest('form').find('div.editable').each(function(index){
        //you could use the index when you use .each function
        $(this).attr('id', 'ed' + (index+1));
        if( ($(this).text() != '') && ($(this).text() != ' ') ){
            $(this).addClass('edited');
            //instead of using another loop, you can put your code here
            arrEdited.push({
                id: $(this).attr('id'),
                text: $.trim($(this).text())
            });
            //here you use an object, people call it array of objects
        }
    });
});

You should use array of objects to store the div id and text inside array.

Check this:

// my attempt for the array (perhaps the wrong approach):
var arrEdited = []; // [] is better than new Array()

$('div.edited').each(function () {
    // Add this div id and content in array
    arrEdited.push({
        id: $(this).attr('id'),
        text: $.trim($(this).text())
    });
});

You can use .map() to create an array.

Pass each element in the current matched set through a function, producing a new jQuery object containing the return value.

As the return value is a jQuery object, which contains an array, it's very mon to call .get() on the result to work with a basic array.

var arrEdited = $('div.edited').map(function(){
    return {
        id: this.id,
        text: $.trim($(this).text())
    }
}).get();