jQuery: How to create array with two values for each item

Question

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

not $(this).text , it should be $(this).text()

Pranav C Balan
– Pranav C Balan

2015-06-04 07:37:23 +00:00
Commented Jun 4, 2015 at 7:37 — Pranav C Balan
– Pranav C Balan, Commented Jun 4, 2015 at 7:37

Satpal · Accepted Answer · 2015-06-04 07:55:09Z

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
        }
    });
});

edited Jun 4, 2015 at 7:55

Satpal

134k13 gold badges168 silver badges171 bronze badges

answered Jun 4, 2015 at 7:41

Bla...

7,2887 gold badges30 silver badges47 bronze badges

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

4 Comments

keewee279 Over a year ago

Thanks for this ! You are right, this is even better in my case - and thanks for the explanations as well. Will accept this as soon as I can. :)

keewee279 Over a year ago

Just to add: There is a dot missing in front of "attr" - I corrected this in my post.

Satpal Over a year ago

@keewee279, It would be better to use index instead of i, api.jquery.com/jquery.each/#jQuery-each-array-callback

Satpal Over a year ago

@keewee279, do remove i++; while using the code and also cache $(this) in a variable like var _this = $(this); and use _this in each block

Tushar · Accepted Answer · 2015-06-04 07:38:14Z

3

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

answered Jun 4, 2015 at 7:38

Tushar

87.4k21 gold badges164 silver badges182 bronze badges

1 Comment

keewee279 Over a year ago

Thanks for this as well. Can you explain why [] is better than new Array ?

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

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 common 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();

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 4, 2015 at 7:38

Satpal

134k13 gold badges168 silver badges171 bronze badges

Collectives™ on Stack Overflow

jQuery: How to create array with two values for each item

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related