Question 35519 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

I want to add single image multiple times as per count received from User – Jquery

I want to add single image multiple times, the count I will get from user. I want to add this image in particular class which will be in slick-slider cards.

I have tried JavaScript where I show image by for loop, but it get visible in only one card
all cards have different amount of images

HTML:

<div class="testimonialCarousel">
                <div class="item">
                    <div class="testimonialCard">
                        <div class="ratingStar"></div>
                        <div class="testimonialContent">
                            <p class="testimonailText">Lorem ipsum dolor sit amet consectetur. Augue orci sem nisi arcu sed faucibus fermentum. Ipsum sed morbi dapibus libero id massa fermentum id lorem justo.</p>
                            <p class="authorName">Ajit Babaleshwar</p>
                        </div>       
                    </div>
                </div>
                <div class="item">
                    <div class="testimonialCard">
                        <div class="ratingStar"></div>
                        <div class="testimonialContent">
                            <p class="testimonailText">Lorem ipsum dolor sit amet consectetur. Eu egestas non etiam netus velit vitae non tortor at. Viverra tempus nunc eget aliquam. Cursus sit elementum bibendum in duis amet in. Pulvinar turpis purus nunc nunc tellus. Suscipit pellentesque neque faucibus urna cursus.</p>
                            <p class="authorName">Nahia Colunga</p>
                        </div>       
                    </div>
                </div>
                <div class="item">
                    <div class="testimonialCard">
                        <div class="ratingStar"></div>
                        <div class="testimonialContent">
                            <p class="testimonailText">Lorem ipsum dolor sit amet consectetur. Eget dictumst est neque suspendisse arcu ullamcorper. Nascetur faucibus faucibus habitant auctor. Dui tortor nullam aliquam et. Amet et consectetur gravida sed ullamcorper dui odio. Sit natoque fusce egestas amet etiam cras.</p>
                            <p class="authorName">Ajit Babaleshwar</p>
                        </div>       
                    </div>
                </div>
                <div class="item">
                    <div class="testimonialCard">
                        <div class="ratingStar"></div>
                        <div class="testimonialContent">
                            <p class="testimonailText">Lorem ipsum dolor sit amet consectetur. Augue orci sem nisi arcu sed faucibus fermentum. Ipsum sed morbi dapibus libero id massa fermentum id lorem justo.</p>
                            <p class="authorName">Ajit Babaleshwar</p>
                        </div>       
                    </div>
                </div>
            </div>

JS

   var numberOfRating = 5;
    var theLeftSide = document.querySelectorAll(".ratingStar");
    ratingsRow()
    function ratingsRow() {
      for(i = 0; i < numberOfRating; i++) {
        var stars = document.createElement("img");
        stars.src = "assets/images/rating.png";
        theLeftSide[0].appendChild(stars);
     }

   }
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Updated little Above code by @juan, and below code worked for me,

    var cardDivs = document.getElementsByClassName('testimonialCard');

        for (var i=0; i<cardDivs.length; i++) {

            //Below logic is for getting count from card
            var selectedDiv = cardDivs[i];
            var val = selectedDiv.getElementsByClassName('starsToShow')[0].value;
            var starCount = parseInt(val);
            
            //appending star logic below

            let starElement = selectedDiv.getElementsByClassName('ratingStar')[0];
            for(let j = 0; j < starCount; j++){
                var stars = document.createElement("img");
            stars.src = "rating.png";
                starElement.append(stars);
            }
        }

  2. 0

    This code may work if I understood what you wanted.
    With as specified by @CBroe two loops, one to go through each DIV of class "ratingStar" and one to insert the images

    var numberOfRating = 5;

// For each Element with class "ratingStar"
$('.ratingStar').each(function(index){
    

    // For each Rating
    for(i=0;i<numberOfRating;i++)
    {
        // Create Image
        var stars = document.createElement("img");
        stars.src = "rating.png";

        // Append Image
        $(this).append(stars);
    }
    // End - For each Rating

});
// End - each Element with class "ratingStar"
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search