сортируемый селектор jQuery ("id" против "class")?

У меня есть несколько списков, которые можно сортировать, и я могу перетаскивать элементы в каждый список.

Настройка выглядит примерно так: 

<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 прост и выглядит следующим образом

(следующие примеры с сайта jQuery) 

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

Пока все хорошо...

Вопрос:

Для селектора jQuery можно ли использовать класс ul вместо двух идентификаторов списка??

Что-то вроде: 

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

Будет ли это правильно?

Я пробовал это, и это работает...

...но мне интересно Почему веб-сайт jQuery приводит пример с обоими идентификаторами списка в качестве селектора, а не только с именем класса?? Могу ли я столкнуться с проблемами совместимости, если использую класс в качестве селектора?

Преимущество использования имени класса в качестве селектора заключается в том, что мне не нужно заранее знать идентификаторы списков и теоретически можно создавать новые списки на лету?

Что было бы лучшей практикой и своего рода " ошибкой доказательство?

Большое спасибо!

1 6
jquery-ui-sortable jquery-selectors

1 ответ:

Выбор классом-это нормально, и ваш скрипт корректен.

Я никогда не сталкивался с проблемами совместимости при выборе элементов по их классу.

Использование имен классов имеет преимущество в том, что не нужно указывать идентификаторы всех элементов для сопоставления. Его недостатком является возможность сопоставления большего количества элементов, чем вы намереваетесь, если класс был неправильно использован в других элементах.

При указании элементов по идентификатору вы уверены, что выбрали только те элементы, которые намеревались. Поэтому это может быть полезно, когда вы точно знаете, какие элементы DOM вы хотите сопоставить, и вы знаете их идентификаторы; это, как вы заметили, может быть невозможно, если вы создаете элементы на лету.

Я думаю, что в вашем случае лучше всего было бы использовать имена классов. Не используйте имя класса, которому вы соответствуете в CSS; если он отвечает за форматирование, вы (или другие люди в вашей команде) можете забыть о поведенческих изменениях, которые он дает, и использовать его на других, не связанных элементах, только для форматирования. Это может привести к ошибкам. Лучше иметь отдельные классы 'behavioral' и' presentation', использовать классы презентаций в CSS и поведенческие классы для выбора элементов в jQuery.

2