jQuery sortable selector ("id" vs. "klasa")?

Question

Mam kilka list, które można sortować i mogę przeciągać elementy do każdej listy.

Konfiguracja wygląda mniej więcej tak:

<ul id="sortable1" class="connectedSortable"> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
</ul> 

<ul id="sortable2" class="connectedSortable"> 
<li>Item 1</li> 
<li>Item 2</li> 
<li>Item 3</li> 
</ul> 

kod JavaScript jest prosta i wygląda następująco

(poniższe przykłady z portalu jQuery)

<script> 
$(function() { 
    $("#sortable1, #sortable2").sortable({ 
     connectWith: ".connectedSortable" 
    }).disableSelection(); 
}); 
</script> 

tej pory tak dobry ...

PYTANIE:

Dla selektora jQuery, czy mogę użyć klasy ul zamiast dwóch identyfikatorów list?

Coś jak:

<script> 
$(function() { 
    $(".connectedSortable").sortable({ 
     connectWith: ".connectedSortable" 
    }).disableSelection(); 
}); 
</script> 

Czy jest to prawidłowe?

Próbowałem to i to działa ...

... ale zastanawiam dlaczego ma strona jQuery dać przykład z obu identyfikatorów listy jako selektor, a nie tylko z nazwy klasy ?? Czy mogę uruchomić problemy ze zgodnością, jeśli używam klasy jako selektora?

Zaletą używania nazwy klasy jako selektora byłoby to, że nie muszę znać identyfikatorów list z góry i czy teoretycznie mogę tworzyć nowe listy w locie?

Jaka byłaby najlepsza praktyka i rodzaj "błędu dowodu"?

Wielkie dzięki!

Answer 1

Wybieranie według klasy jest prawidłowe, a skrypt jest poprawny.

Nigdy nie napotkam żadnych problemów ze zgodnością podczas wybierania elementów według ich klasy.

Używanie nazw klas ma za zadanie nie określać identyfikatorów wszystkich pasujących elementów. Jego wadą jest możliwość dopasowania większej liczby elementów, niż zamierzałeś, jeśli klasa była niewłaściwie używana w innych elementach.

Podczas określania elementów według identyfikatora, masz pewność, że wybrano tylko wybrane elementy. Może to być przydatne, gdy dokładnie wiesz, które elementy DOM chcesz dopasować, i znasz ich identyfikatory; to, jak zauważyłeś, może być niemożliwe, jeśli tworzysz elementy w locie.

Myślę, że w twoim przypadku najlepszą praktyką byłoby użycie nazw klas. Nie używaj nazwy klasy, do której pasujesz, w CSS; jeśli jest odpowiedzialny za formatowanie, ty (lub inni ludzie w zespole) możesz zapomnieć o wprowadzanych zmianach zachowania i używać go w innych, niezwiązanych ze sobą elementach, tylko do samego formatowania. To może spowodować błędy. Lepiej mieć oddzielne klasy "behawioralne" i "prezentacja", używać klas prezentacji w CSS i klas behawioralnych do wybierania elementów w jQuery.