[英]Semantically “correct” way to select multiple elements in jQuery?
I often use classes
as a means to identify a related set of elements, for example: 我经常使用
classes
作为识别相关元素集的手段,例如:
<input value="10" class="sum-this" />
<input value="20" class="sum-this" />
<input value="30" class="sum-this" />
The sum-this
class has no CSS, and isn't defined in any CSS files -it's simply used in some jQuery - for example: sum-this
类没有CSS,并且没有在任何CSS文件中定义 - 例如在一些jQuery中使用 - 例如:
var total = 0;
$(".sum-this").each(function(i, el){
total += parseInt($(el).val());
});
console.log(total); // 60?
Is there a correct way to do this? 有没有正确的方法来做到这一点? Should I use another attribute?
我应该使用其他属性吗?
rel
or data-*
? rel
或data-*
?
As @Pointy and @JustinPowell have stated in the comments, this is completely valid. 正如@Pointy和@JustinPowell在评论中所述,这是完全有效的。 In fact, it's also explicitely stated in the W3C HTML4 specification that using
class
attributes for purposes other than selecting style is completely valid. 实际上,在W3C HTML4规范中也明确指出,将
class
属性用于选择样式以外的目的是完全有效的。 I quote: 我引用:
The class attribute, on the other hand, assigns one or more class names to an element;
另一方面,class属性为一个元素分配一个或多个类名; 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:
class属性在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.
用于通用用户代理处理。
However, HTML5 also added the custom data-*
attributes (where *
is a custom string) for this purpose. 但是,为此,HTML5还添加了自定义
data-*
属性(其中*
是自定义字符串)。
LINKS 链接
As said in the comments, it's perfectly fine to use classes in the JavaScript only. 正如评论中所说,仅在JavaScript中使用类是完全正确的。 But here's a suggestion: when my colleagues want to use a class for this purpose only, they prefix it by
'js-'
in order to distinguish classes used for styling from classes made for JS. 但是这里有一个建议:当我的同事只想为此目的使用一个类时,它们用
'js-'
作为前缀,以区分用于样式的类和为JS创建的类。
While your code is syntactically valid using classes and there's nothing wrong with it, since you're looking for something that's semantically correct I'd recommend data attributes . 虽然你的代码在语法上使用类是有效的,但它没有任何问题,因为你正在寻找语义正确的东西,我建议使用数据属性 。 Classes are really meant to be used for styling while data attribtes were created "with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. "
类实际上是用于样式化的,而数据属性是“在可以与特定元素相关但不需要任何定义的含义的数据中考虑可扩展性”而创建的。
You could write your HTML like: 您可以编写HTML,如:
<input value="10" data-item="sum-this" />
<input value="20" data-item="sum-this" />
<input value="30" data-item="sum-this" />
And your jQuery like: 你的jQuery就像:
var total = 0;
$('input[data-item="sum-this"]').each(function(i, el){
total += parseInt($(el).val());
});
console.log(total);
jQuery selector optimization is less important than it used to be, as more browsers implement getElementsByClassName, querySelector and querySelectorAll which parses CSS syntax. jQuery选择器优化不像以前那么重要,因为更多的浏览器实现了解析CSS语法的getElementsByClassName,querySelector和querySelectorAll。
So the burden of selection shifts from jQuery to the browser and now jQuery supports most CSS3 selectors, as well as some non-standard selectors and you can choose the selector you want to work with. 所以选择的负担从jQuery转移到浏览器,现在jQuery支持大多数CSS3选择器,以及一些非标准选择器,你可以选择你想要使用的选择器。
However, there are still some tips to keep in mind: 但是,仍有一些提示要记住:
As everyone else has said, it's entirely appropriate to class elements for the purposes of javascript only. 正如其他人所说的那样,仅仅为了javascript而对类元素进行完全合适。
In the example that you give, the alternative to collecting these elements: 在您给出的示例中,可以选择收集这些元素:
<input value="10" class="sum-this" />
<input value="20" class="sum-this" />
<input value="30" class="sum-this" />
with: 有:
document.querySelectorAll('.sum-this');
(or $('.sum-this')
in jQuery) (或jQuery中的
$('.sum-this')
)
might be to collect these elements: 可能是收集这些元素:
<input value="10" />
<input value="20" />
<input value="30" />
with: 有:
document.querySelectorAll('input[value]');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.