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
Share Improve this question edited Jun 4, 2015 at 7:44 keewee279 asked Jun 4, 2015 at 7:35 keewee279keewee279 1,6546 gold badges34 silver badges63 bronze badges 1-
1
not
$(this).text
, it should be$(this).text()
– Pranav C Balan Commented Jun 4, 2015 at 7:37
3 Answers
Reset to default 3I 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();