Bộ chọn sắp xếp jQuery ("id" so với "class")?

Question

Tôi đang có một số danh sách có thể sắp xếp và tôi có thể kéo các phần tử vào từng danh sách.

Thiết lập trông giống như sau:

<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> 

JavaScript rất đơn giản và trông như thế này

(ví dụ sau đây từ trang web của jQuery)

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

đến nay như vậy tốt ...

CÂU HỎI:

Đối với bộ chọn jQuery, tôi có thể sử dụng lớp ul thay vì hai id danh sách không ??

Cái gì như:

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

Điều này có thể đúng không?

tôi đã cố gắng này và nó hoạt động ...

... nhưng tôi tự hỏi tại sao nào trang web jQuery cung cấp cho các ví dụ với cả hai danh sách id như selector và không chỉ là tên lớp ?? Tôi có thể gặp sự cố tương thích nếu tôi sử dụng lớp làm công cụ chọn không?

Lợi thế của việc sử dụng tên lớp làm công cụ chọn sẽ là tôi không phải biết trước danh sách các id danh sách và về mặt lý thuyết có thể tạo danh sách mới khi đang di chuyển?

Thực tiễn tốt nhất và loại "bằng chứng lỗi" là gì?

Cảm ơn rất nhiều!

Answer 1

Chọn bởi một lớp là OK và tập lệnh của bạn là chính xác.

Tôi chưa bao giờ gặp phải bất kỳ sự cố tương thích nào trong khi chọn yếu tố theo lớp của họ.

Sử dụng tên lớp có các lần khám phá không phải chỉ định ID của tất cả các phần tử để khớp. Disadventage của nó là khả năng phù hợp với nhiều yếu tố hơn bạn dự định, nếu lớp được sử dụng không chính xác trong các yếu tố khác.

Khi chỉ định các yếu tố theo ID, bạn chắc chắn bạn chỉ chọn các yếu tố bạn dự định. Vì vậy, nó có thể hữu ích khi bạn biết chính xác các phần tử DOM nào bạn muốn khớp, và bạn biết ID của chúng; điều này, như bạn nhận thấy, có thể là không thể nếu bạn tạo ra các yếu tố trên bay.

Tôi nghĩ rằng trong trường hợp của bạn, thực hành tốt nhất là sử dụng tên lớp. Không sử dụng tên lớp mà bạn đang so khớp trong CSS; nếu nó chịu trách nhiệm định dạng, bạn (hoặc những người khác trong nhóm của bạn) có thể quên đi những thay đổi hành vi mà nó cung cấp và sử dụng nó trên các phần tử khác, không liên quan, chỉ để định dạng một mình. Điều đó có thể dẫn đến lỗi. Tốt hơn là nên có các lớp 'hành vi' và 'trình bày' riêng biệt, sử dụng các lớp trình bày trong CSS và các lớp hành vi để chọn các phần tử trong jQuery.