Jquery: get stars that have index less than the current clicked star

Question

I have a div with stars:

<aside class="rate review-rate">
                <span class="review-star" index="1">☆</span>
                <span class="review-star" index="2">☆</span>
                <span class="review-star" index="3">☆</span>
                <span class="review-star" index="4">☆</span>
                <span class="review-star" index="5">☆</span>
            </aside>

and a script that makes the star full when it's clicked:

$('.review-star').on('click', function () {
   /* desc = $(this).attr('data-desc'); //get the description
    $('#content').text(desc);*/
    alert("yes");
    alert($(this).attr("index"));
    $(this).text("★")

    var stars = $(".review-star").filter((index, el) => {
        return parseInt($(el).attr("index")) > $(this).attr("index");
    });
    console.log(stars);
    console.log(stars.length)
    for (var starsKey in stars) {
        //$(starsKey).text("★");
    //    console.log(starsKey);
    }
});

However I need to make the previous stars full as well. I tried getting all the stars with attribute index value less than that of the $(this).attr("index") but it didn't work.

EDIT : The answers with prevAll are awesome, but if someone could point me as to what I was doing wrong in my code, it would be very appreciated!

Answer 1

To achieve what you require you can simply use the prevAll() method. addBack() can also be used to include the element which was clicked. Try this:

 $('.review-star').on('click', function() { $(this).prevAll().addBack().text("★"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <aside class="rate review-rate"> <span class="review-star" index="1">☆</span> <span class="review-star" index="2">☆</span> <span class="review-star" index="3">☆</span> <span class="review-star" index="4">☆</span> <span class="review-star" index="5">☆</span> </aside>

Answer 2

You can try using prevAll() and nextAll()

 $('.review-star').on('click', function () { /* desc = $(this).attr('data-desc'); //get the description $('#content').text(desc);*/ //alert("yes"); //alert($(this).attr("index")); $(this).text("★") //var stars = $(".review-star").filter((index, el) => { // return parseInt($(el).attr("index")) > $(this).attr("index"); //}); //console.log(stars); //console.log(stars.length) $(this).prevAll().text("★"); $(this).nextAll().text("☆"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <aside class="rate review-rate"> <span class="review-star" index="1">☆</span> <span class="review-star" index="2">☆</span> <span class="review-star" index="3">☆</span> <span class="review-star" index="4">☆</span> <span class="review-star" index="5">☆</span> </aside>