How to Concatenate the strings in each loop using jquery

Question

I want to concatenate the html of images using jquery in each loop. Here is my code which is not working. I am getting url of images from li attributes and then setting image tag for each url. I am able to get the url successfully but can't concatenate the image tags for each li. need assistance

$('.nav li').each(function(){
        var img_link = $(this).attr('data-menu');
        var img_html = '<img src="'+img_link+'">';
        // here I have to concatenate the img_html in gethtml variable and then I will put it in a div.                 
        });
        $('.main-img').html(gethtml);

you should research jQuery append api.jquery.com/append

Tyler Fowle
– Tyler Fowle

2018-07-31 13:49:58 +00:00
Commented Jul 31, 2018 at 13:49 — Tyler Fowle
– Tyler Fowle, Commented Jul 31, 2018 at 13:49

Ankit Agarwal · Accepted Answer · 2018-07-31 13:49:10Z

4

You need to do gethtml += '<img src="'+img_link+'">'; and initialise gethtml as '' outside the loop:

var gethtml ='';
$('.nav li').each(function(){
    var img_link = $(this).attr('data-menu');
    gethtml += '<img src="'+img_link+'">';
});
$('.main-img').html(gethtml);

answered Jul 31, 2018 at 13:49

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

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

5 Comments

Ankit Agarwal Over a year ago

@Rizwi you can tick mark the answer if that was helpful to you

Tyler Fowle Over a year ago

@rizwi you need to initialize the gethtml outside of the loop because of scope. w3schools.com/js/js_scope.asp

Adictonator Over a year ago

@AnkitAgarwal Slow internet got me lacking. :P

Ankit Agarwal Over a year ago

@TylerFowle it's outside

Tyler Fowle Over a year ago

@AnkitAgarwal just further explaining why you have to do that

Adictonator · Accepted Answer · 2018-07-31 13:52:08Z

3

Try out this code:

let gethtml = '';
$('.nav li').each(function() {
    var img_link = $(this).attr('data-menu');
    var img_html = '<img src="'+img_link+'">';
    gethtml += img_html + ', ';                
});

$('.main-img').html(gethtml);

It will concatenate the gethtml variable with the img_html separated by commas.

answered Jul 31, 2018 at 13:52

Adictonator

15811 bronze badges

Comments

Ali Soltani · Accepted Answer · 2018-07-31 13:57:51Z

0

It's better to use append for doing that like below:

$('.nav li').each(function () {        
    $('.main-img').append($(document.createElement('img')).attr("src", $(this).attr('data-menu')));
});

answered Jul 31, 2018 at 13:57

Ali Soltani

10k5 gold badges33 silver badges58 bronze badges

Collectives™ on Stack Overflow

How to Concatenate the strings in each loop using jquery

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related