jQuery image display issue

Question

I have a div structure like following:

<div id="image0" style="margin-bottom:10px; "></div>
<div id="image1" style="margin-bottom:10px; "></div>
<div id="image2" style="margin-bottom:10px; "></div>
<div id="image3" style="margin-bottom:10px; "></div>
<div id="image4" style="margin-bottom:10px; "></div>

My jQuery code is like follows:

var res = question.text.split(imgQues);
    if (question.image != '') {
        for (var i = 0; i < res[0]; i++) {
            jQuery('#image' + "" + i).html(question.image);
        }
    } else {
        jQuery('#image' + "" + i).html('');
    }

In my case if the res[0] is "5" code will loop to display 5 image and if res[0] value is "1" then its 1 image.

With my above code, it displays 5 images at the beginning but for next time it is still displaying 5 image not 1.

It is an undefined Question, think how you can excess a loop variable outside the scope ... watch out for errors in console — Zafta
– Zafta, Commented Apr 5, 2016 at 8:20

kazenorin · Accepted Answer · 2016-04-05 08:31:54Z

1

The way you are doing it, you are replacing the content of the divs each time. So when res[0] is smaller than the total number of divs, the divs with larger IDs would be left untouched.

To solve this problem, you first have to define the total number of these image divs, say in your example, there are at most 5 of them.

so: var max = 5;

Now change your code a bit so we clear those larger IDs :

var max = 5;
var res = question.text.split(imgQues);
var i;
// Clear them out first
for (i = 0; i < max; i++){
    jQuery('#image' + "" + i).html('');
}
if (question.image != '') {
    for (i = 0; i < res[0]; i++) {
        jQuery('#image' + "" + i).html(question.image);
    }
}

Alternatively, it might be more desirable to do it this way, so there isn't a need to keep track of how many image divs there are:

HTML:

<div id="image-container"></div>

CSS:

.my-image {
    margin-bottom:10px;
}

JavaScript:

var imgContainer = jQuery("#image-container");
imgContainer.html(""); // Clear contents
if (question.image != '') {
    var res = question.text.split(imgQues);
    for(var i = 0; i < res[0]; i++){
        var newImage = jQuery("<div class=\"my-image\"></div>");
        newImage.html(question.image);
        imgContainer.append(newImage);
    }
}

answered Apr 5, 2016 at 8:31

kazenorin

1,4758 silver badges16 bronze badges

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

1 Comment

S S Over a year ago

Thank you for idea

Husen · Accepted Answer · 2016-04-05 08:26:52Z

1

    for (var j = 0; j < res; j++) {
        for (var i = 0; i < res[j]; i++) {
            $('#image' + "" + i).html(question.image);
        }
    }

You have to add two loops like this.

answered Apr 5, 2016 at 8:26

Husen

1,58510 silver badges14 bronze badges

Comments

S S · Accepted Answer · 2016-04-05 08:23:49Z

0

Oh I forgot to clear div. Its working now. Thank you.

answered Apr 5, 2016 at 8:23

S S

1,5132 gold badges17 silver badges47 bronze badges

Collectives™ on Stack Overflow

jQuery image display issue

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related