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

Question

I'm having several lists that are sortable and I can drag elements to each list.

The setup looks something like this:

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

the JavaScript is simple and looks like this

(following examples from the jQuery website)

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

so far so good...

QUESTION:

For the jQuery selector, can I use the ul class, instead of the two list ids??

Something like:

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

Would this be correct?

I've tried this and it works...

...but I wonder why does the jQuery website give the example with both list ids as selector and not just the class name?? Could I run into compatibility issues if I use the class as selector?

The advantage of using a class name as selector would be that I don't have to know the list ids in advance and could theoretically create new lists on the fly?

What would be best practise and kind of "error proof"?

Thanks a lot!

Answer 1

Selecting by a class is OK and your script is correct.

I've never run into any compatibility problems while selecting elements by their class.

Using class names has the adventages of not having to specify IDs of all elements to match. Its disadventage is the possibility of matching more elements than you intend to, if the class was incorrectly used in other elements.

When specifying elements by ID, you're sure you only selected elements you intended to. So it can be useful when you know exactly which DOM elements you want to match, and you know their IDs; this, as you noticed, can be impossible if you create elements on the fly.

I think in your case best practice would be to use class names. Don't use the class name you're matching against in CSS; if it's responsible for formatting, you (or other people on your team) may forget about behavioral changes it gives and use it on other, unrelated elements, just for formatting alone. That may result in bugs. It's better to have separate 'behavioral' and 'presentation' classes, use presentation classes in CSS, and behavioral classes for selecting elements in jQuery.