javascript - 在 jQuery 中选择多个元素的语义 "correct"方式？

Question

我经常使用类作为识别一组相关元素的手段，例如:

<input value="10" class="sum-this" />
<input value="20" class="sum-this" />
<input value="30" class="sum-this" />

sum-this 类没有 CSS，也没有在任何 CSS 文件中定义 - 它只是在一些 jQuery 中使用 - 例如:

var total = 0;
$(".sum-this").each(function(i, el){
  total += parseInt($(el).val());
});
console.log(total); // 60?

有没有正确的方法来做到这一点？我应该使用另一个属性吗？ rel 还是 data-*？

Answer 1

正如@Pointy 和@JustinPowell 在评论中所述，这是完全有效的。事实上，在 W3C HTML4 规范中也明确指出，将 class 属性用于选择样式以外的目的是完全有效的。我引用:

The class attribute, on the other hand, assigns one or more class names to an element; the element may be said to belong to these classes. A class name may be shared by several element instances. The class attribute has several roles in HTML:

• As a style sheet selector (when an author wishes to assign style information to a set of elements).
• For general purpose processing by user agents.

但是，HTML5 还为此添加了自定义 data-* 属性(其中 * 是自定义字符串)。

---

链接

1. A blog post discussing your question
2. W3C HTML4 attributes
3. W3C HTML 5 data attribute