Советы по ссылкам на DOM Elements, работающие с jQuery

Question

Нужен совет о том, как ссылаться на элементы с помощью jQuery (DOM / Traversing / Selectors). Иногда достаточно просто установить идентификатор на нужный элемент и сделать это:

$('#elementID').hide();

Но иногда его просто нельзя использовать, например, при работе со списком из n элементов, я видел, как некоторые люди прикрепляли класс к каждому элементу списка, например:

<a class="selectMe" href="http://jquery.com/">jQuery1</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>

А затем сделайте это с помощью jQuery:

$('.selectMe').hide();

Некоторые другие делают то же самое, но с атрибутом rel и т. Д.

Некоторые другие люди делают это настолько обобщенно, что это страшно, если это сценарий:

<div id="MyID">
<span>Some Text Here</span><a href="http://jquery.com/">jQuery1</a>
</div>

Если я хочу прикрепить событие к якору:

$('#MyID a').show();

Например, если предположить, что внутри этого DIV будет только 1 ссылка.

То, что вы, ребята, думаете, на самом деле полностью зависит от сценария, или есть несколько хороших практик для этого.

Answer 1

Я бы сказал, что это зависит от ситуации, но, как сказал Марк Шультхайс, это помогает понять, как jQuery выполняет ваши селекторы для получения элементов.

Выбор по className без указания контекста в IE будет медленным, поскольку он не поддерживает getElementsByClassName. См. Эту статью http://ejohn.org/blog/getelementsbyclassname-speed-comparison/. Это помогает добавить в начале имя элемента (например, div.className) или ограничить поиск меньшим объемом, как это - $('.class', '#myDiv')

То же самое относится и к селекторам атрибутов. Злоупотребление атрибутом rel хуже, чем злоупотребление атрибутом class, поскольку в любом браузере нет встроенной функции поиска по атрибутам.

Answer 2

Ищите самые быстрые конструкции. ID самый быстрый. Получите самый маленький контекст быстро - вы даже можете использовать идентификатор в DIV, а затем выбирать там - избегать полного поиска DOM, когда это возможно.

Например, поиск по элементу с классом будет быстрее, чем просто по классу.

Отчасти это НЕ интуитивно понятно. Посмотрите на некоторые примеры в StackOverflow, чтобы понять, что работает.

Например:

<div id='mydiv'>
<a class="selectMe" href="http://jquery.com/">jQuery1</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
<a class="selectMe" href="http://jquery.com/">jQuery2</a>
</div>

затем выберите: (Отредактировано для заметок)

$('#mydiv').children('a.selectMe').hide();

Это тогда только ищет в этом контексте ссылки.

Редактировать по нотам:

Существуют некоторые настройки для синтаксиса выбора, такие как:

 $('#mydiv').children('a.selectMe').hide();
 $('#mydiv > a.selectMe').hide();

Некоторое исследование с моей стороны необходимо, поскольку документация для jQuery здесь немного двусмысленна: " parent> child Возвращает: Массив Соответствует всем дочерним элементам, указанным «child» элементов, указанных «parent». " а также " children (expr) Возвращает: jQuery Получите набор элементов, содержащий все уникальные непосредственные дочерние элементы каждого соответствующего набора элементов. «

Вопрос, который необходимо прояснить в МОЕМ разуме, заключается в том, возвращает ли первая форма ВСЕХ детей / внуков или только непосредственных детей, как указывает вторая форма, верно. Одной из них является форма «селектор», а другой - «обход», для меня это схожие функциональные задачи, но не одно и то же.