jQuery选择具有相同类名的所有元素

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

JSFiddle Example

Try this:

$(document).on("mouseover", ".stars", function () {
    var score = 0;
    $("input.stars").each(function (index, element) {
        // element == this
        //if the star is not empty, add it to the score
        if ($(element).attr("src") != "style/EmptyStar.png") {
            score = score + 1;
        };
    });
    debugger;
    $("#MainContent_lblScore").val(score);
});

Mike Edwards is completely correct in pointing out that you stopped counting as soon as you hit an empty star. Actually it only returns out of that current function, and the each() will continue to execute. Ok, the each() will only discontinue execution if you return false , as seen in this example . The function I have outlined counts all the non-empty stars, and uses a better selector.

I notice that in the score aggregation you only grab the stars that are input elements, which makes sense; however, in the mouseover event, you apply it to any element that has the .stars class. Perhaps this is intentional so that they can mouse over a div that says "Show stars" or something, but if not you may wish to change that to

$(document).on("mouseover", "input.stars", function () {

to avoid unexpected behavior.

Answer 3

Could you try with

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