Question

I have a variable name of which gives me few elements:

console.log(name) = joe,foo,john,maria

and the variable src gives me a link of each of the names:

console.log(src) = www.joe.com, www.foo.com, www.john.com and www.maria.com respectively.

Now I want to append a div of which each will have the id of the ‘name’ and for text the link for each so I will end up with something likes this:

<div id="joe">www.joe.com</div>
<div id="foo">www.foo.com</div>
<div id="john">www.john.com</div>
<div id="maria">www.maria.com</div>

This is what I have so far:

var arr = [];
var textToInsert = '';
$.each(arr, function(count, item) {
  textToInsert  += '<div id="'+ name +'">' + a + '</div>';
});

$('body').append(textToInsert);

Answer 1

Assuming name and src are arrays of strings, you’re just about there–get the index of the name item from name and use it to grab the corresponding src url in the other array. Otherwise, make a map out of the two lists and do it that way.

var arr = ['a', 'b', 'c', 'd'];
var arr2 = [ 1, 2, 3, 4];
var result = "";

$.each(arr, function(index, value) {
    result += '<div id="' + value + '">' + arr2[index] + "</div>"

});

$('body').html(result);