jQuery select all elements with same class name

Question

I'm implementing a rating system on my website and trying display a total score when the user mouses over any rating star. The problem is that the jQuery select is only selecting the first set of input elements. So, in the html below, it's only selecting elements with id of "ax1" through "ax5". What I'm trying to do is iterate through each "star" input element, check to see if the image is a filled star (there is javascript in the mouseover event of each element to flip the image from empty star to filled star), and if it's a filled star the score is increased. Again, the problem is that only the first set of "stars" are being counted.

HTML:

            <div style="margin: 20px 0 0 0; float: left;">
            <div class="divStars" style="width: 130px; float: left;">
                <input type="image" name="ctl00$MainContent$ax1" id="MainContent_ax1" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$ax2" id="MainContent_ax2" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$ax3" id="MainContent_ax3" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$ax4" id="MainContent_ax4" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$ax5" id="MainContent_ax5" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />

            </div>
            <div style="margin-top: 3px; width: 600px; float: left;">
                <span>axs</span>
            </div>
        </div>
        <div style="margin: 20px 0 0 0; float: left;">
            <div class="divStars" style="width: 130px; float: left;">
                <input type="image" name="ctl00$MainContent$bx1" id="MainContent_bx1" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$bx2" id="MainContent_bx2" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$bx3" id="MainContent_bx3" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$bx4" id="MainContent_bx4" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
                <input type="image" name="ctl00$MainContent$bx5" id="MainContent_bx5" class="stars" onmouseover="<code to flip image>" src="style/EmptyStar.png" style="height:20px;width:20px;" />
            </div>
            <div style="margin-top: 3px; width: 600px; float: left;">
                <span>bx blah blah</span>
            </div>
        </div>

Javascript:

        $(document).on("mouseover", ".stars", function () {
        var score = 0;
        $("input[class='stars']").each(function (index, element) {
            // element == this
            if ($(element).attr("src") == "style/EmptyStar.png") {
                return false;
            }
            else {
                score = score + 1;
            };
        });
        debugger;
        $("#MainContent_lblScore").val(score);
    });

Answer 1

Returning false from the function inside the .each() call terminates the each loop. The code as you have written it will terminate the first time it detects an empty star.

Try doing a console.log($("input[class='stars']").length) to see how many you are getting.

I also agree that you should modify your selector. "input.stars" is a generally a better selector than "input[class='stars']" because:

1) it will match <input class="stars anotherClass"> but your selector will not

2) browsers generally have faster selection of elements that are selected by class. Technically you are selecting by class but you are using attribute syntax which probably doesn't trigger the optimized portion of the selection engine.

Answer 2

Could you try with

      $(".stars").each(function (index, element) {
        // element == this
        if ($(this).attr("src") == "style/EmptyStar.png") {
            return false;
        }
        else {
            score = score + 1;
        };
    });