在jQuery中選擇多個元素的語義“正確”方式？

Question

我經常使用classes作為識別相關元素集的手段，例如：

<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屬性用於選擇樣式以外的目的是完全有效的。 我引用：

另一方面，class屬性為一個元素分配一個或多個類名; 該元素可以說屬於這些類。 類名可以由多個元素實例共享。 class屬性在HTML中有幾個角色：

作為樣式表選擇器（當作者希望將樣式信息分配給一組元素時）。

用於通用用戶代理處理。

但是，為此，HTML5還添加了自定義data-*屬性（其中*是自定義字符串）。

鏈接

Answer 2

正如評論中所說，僅在JavaScript中使用類是完全正確的。 但是這里有一個建議：當我的同事只想為此目的使用一個類時，它們用'js-'作為前綴，以區分用於樣式的類和為JS創建的類。

Answer 3

雖然你的代碼在語法上使用類是有效的，但它沒有任何問題，因為你正在尋找語義正確的東西，我建議使用數據屬性。 類實際上是用於樣式化的，而數據屬性是“在可以與特定元素相關但不需要任何定義的含義的數據中考慮可擴展性”而創建的。

您可以編寫HTML，如：

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

你的jQuery就像：

var total = 0;
$('input[data-item="sum-this"]').each(function(i, el){
  total += parseInt($(el).val());
});
console.log(total);

Answer 4

jQuery選擇器優化不像以前那么重要，因為更多的瀏覽器實現了解析CSS語法的getElementsByClassName，querySelector和querySelectorAll。

所以選擇的負擔從jQuery轉移到瀏覽器，現在jQuery支持大多數CSS3選擇器，以及一些非標准選擇器，你可以選擇你想要使用的選擇器。

但是，仍有一些提示要記住：

Answer 5

正如其他人所說的那樣，僅僅為了javascript而對類元素進行完全合適。

在您給出的示例中，可以選擇收集這些元素：

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

有：

document.querySelectorAll('.sum-this'); （或jQuery中的$('.sum-this') ）

可能是收集這些元素：

<input value="10" />
<input value="20" />
<input value="30" />

有：

document.querySelectorAll('input[value]');