jQuery jQuery选择具有相同类名的所有元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19415450/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery select all elements with same class name
提问by brad
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.
我正在我的网站上实施评分系统，并尝试在用户将鼠标悬停在任何评分星上时显示总分。问题是 jQuery select 只选择第一组输入元素。因此，在下面的 html 中，它只选择 id 为“ax1”到“ax5”的元素。我想要做的是遍历每个“星”输入元素，检查图像是否是实心星（每个元素的鼠标悬停事件中有 javascript 可以将图像从空星翻转为实心星），如果是实心星，则分数会增加。同样，问题是只计算第一组“星星”。
HTML:
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:
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);
});
回答by Mike Edwards
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.
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.
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:
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
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.
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.
回答by MirroredFate
Try this:
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 Ok, the each()will continue to execute.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.
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 Ok, the each()will continue to execute.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 .starsclass. Perhaps this is intentional so that they can mouse over a divthat says "Show stars" or something, but if not you may wish to change that to
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 .starsclass. Perhaps this is intentional so that they can mouse over a divthat 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.
to avoid unexpected behavior.
回答by vljc2004
Could you try with
你能试试吗
$(".stars").each(function (index, element) {
// element == this
if ($(this).attr("src") == "style/EmptyStar.png") {
return false;
}
else {
score = score + 1;
};
});
