Semantycznie "poprawny" sposób wyboru wielu elementów w jQuery?

Question

często używam classes jako środek do identyfikacji powiązany zbiór elementów, na przykład:

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

Klasa sum-this ma CSS, a nie jest zdefiniowane w dowolnych plików CSS -To po prostu wykorzystywane w niektórych jQuery - na przykład:

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

Czy jest to właściwy sposób? Czy powinienem użyć innego atrybutu? rel lub data-*?

Answer 1

Jako że @Pointy i @JustinPowell podały w komentarzach, jest to całkowicie poprawne. W rzeczywistości jest to również wyraźnie określone w specyfikacji W3C HTML4, że używanie atrybutów class do celów innych niż wybór stylu jest całkowicie poprawne. Cytuję:

Z kolei atrybut class przypisuje jednej lub więcej nazw klas do elementu; można powiedzieć, że element należy do tych klas. Nazwa klasy może być współużytkowana przez kilka instancji elementu. Atrybut klasy ma kilka ról w HTML:

• Jako selektor arkusza stylów (gdy autor chce przypisać informacje o stylu do zestawu elementów).
• Do ogólnego przetwarzania przez programy użytkownika.

Jednak HTML5 dodaje również niestandardowe data-* atrybuty (gdzie * jest zwyczaj string) w tym celu.

---

LINKI

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

Answer 2

Jak powiedział w komentarzach, to perfekcyjnie używać zajęcia tylko JavaScript. Ale oto sugestia: kiedy moi koledzy chcą użyć klasy tylko w tym celu, przedrostkują ją przez 'js-', aby odróżnić klasy używane do stylizacji od klas stworzonych dla JS.

Answer 3

Chociaż kod jest poprawny pod względem składni przy użyciu klas i nie ma w tym nic złego, ponieważ szukasz czegoś, co jest semantycznie poprawne, polecam data attributes. Klasy są naprawdę przeznaczone do stylizacji, podczas gdy atrybuty danych zostały stworzone "z myślą o rozszerzalności dla danych, które powinny być powiązane z konkretnym elementem, ale nie muszą mieć żadnego zdefiniowanego znaczenia."

Można napisać HTML jak:

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

A twój jQuery jak:

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

Answer 4

jQuery optymalizacja selektor ma mniejsze znaczenie niż kiedyś, ponieważ coraz więcej przeglądarek zaimplementować getElementsByClassName, querySelector i querySelectorAll, który analizuje składnię CSS:

Tak więc obciążenie selekcji przechodzi z jQuery do przeglądarki, a teraz jQuery obsługuje mo selektory CSS3, a także niektóre niestandardowe selektory i możesz wybrać selektor, z którym chcesz pracować.

Jednak nadal istnieje kilka wskazówek, o których warto pamiętać:

1. użyć ID jeśli to możliwe
2. uniknąć wybierania przez klasy Tylko
3. unikać nadmiernie złożonych selektorów
4. Wzrost Specyfika od lewej do Prawo
5. Unikaj powtórzeń wybieraka

Answer 5

Jak powiedzieli wszyscy inni, jest to całkowicie odpowiednie dla elementów klas do celów wyłącznie javascript.

Na przykład, że dajesz, alternatywę do zbierania tych elementów:

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

z:

document.querySelectorAll('.sum-this'); (lub $('.sum-this') w jQuery)

może być zebranie tych elementów:

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

z :

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