inaz inaz - 3 months ago 8
CSS Question

How to add images (a splitted string in array with .png string concat in each index) in the same div in which script is entered

I am trying to extract everything before the ',' comma. and replace it with a same name image.in a different divs. how can i create a div element dynamically and add all images passed in it and then add this div inside the div with class name slidepop. i want to have different div with classname slidepop and attend div inside it every time. in below code the slidepop div should be open .
here is my codes:

<html>
<head>
<script>
function splitString(stringToSplit, separator) {
var arrayOfStrings = stringToSplit.split(separator);

var imagesHtml = '';
for(var i = 0; i < arrayOfStrings.length; i++){
if(arrayOfStrings[i] !== ''){
imagesHtml = imagesHtml + '<img src="/images/' + arrayOfStrings[i] + '.png" />'
}
}
var newDiv = $("<div></div>");
newDiv.append(imagesHtml);
$(".slidepop").append(newDiv);
}
</script>
</head>
<body>
<div class="slidepop">
<script> splitString(',brickfast,travel insurance,guide,sim cart,tour',',')</script>
</div>
</body>
</html>

Answer

I have answered the previous similar question posted by you yesterday. And I have looked into the problem again and think your problem can be solved by using global variable in Javascript.

As your problem was that you have multiple divs with class name 'slidepop' and you want to pass different string to split and populate images in the very div in which the script is called.

I have solved the problem like this.

<html>
        <head>
        <script>
        counter = 0;

        function splitString(stringToSplit, separator, div) {
        var arrayOfStrings = stringToSplit.split(separator);

        var imagesHtml = '';
        for(var i = 0; i < arrayOfStrings.length; i++){
            if(arrayOfStrings[i] !== ''){
               imagesHtml = imagesHtml + '<img src="/images/' + arrayOfStrings[i] + '.png" />'
            }
        }

        $.each($('.slidepop'), function(index){
            if(index === counter){
                $(this).append(imagesHtml);
                counter++;
            }
        });
}
        </script>
        </head>
        <body>
        <div  class="slidepop">
            <script> splitString(',brickfast,travel insurance,guide,sim cart,tour',',') </script>
        </div>  

        <div  class="slidepop">
            <script> splitString(',brickfast2,travel insurance2,guide2,sim cart2,tour2',',') </script>
        </div>          
        </body>
        </html>

In your script tag I defined a global variable named counter and initialized it with 0. Now what my written script will do that it will split the passed string same as before. But it will then find all the divs in which class name is slidepop. Now it traverse through each div with $.each() method and when it finds that the index (div no) that is same as counter, it will append the images in that very div. So whenever your splitString() function is called, it will increment the counter (global variable) by 1 so that the function will know that the next images to be placed in next div with class name slidepop