Блог

Главная - Вопросы по программированию - «: последний по типу» или «.last()» при использовании jQuery

«: последний по типу» или «.last()» при использовании jQuery

#javascript #jquery #jquery-selectors #css-selectors #pseudo-class

#javascript #jquery #jquery-селекторы #css-селекторы #псевдокласс

Вопрос:

:last-of-type (начиная с версии v1.9) vs .last() (начиная с версии v1.4): Любой метод работает, но кто-нибудь может сказать мне, какой метод лучше, основанный на эффективности?

Пример: 

 $(".item").last();

$(".item:last-of-type");

«.last()» существует дольше (начиная с версии v1.4).
Есть ли в jQuery встроенный «:last-of-type» или он просто использует CSS и использует возможности браузера? Кто-нибудь может это подтвердить?

Мне кажется, что «:last-of-type» было бы лучше, когда применимо, если это так.

Комментарии:

1. Почему бы не запустить несколько тестов jsperf?

2. В общем, селекторы jQuery будут использовать собственные селекторы, когда это возможно.

3. Селекторы выполняют два разных выбора, нет?

4. Они даже отдаленно не выполняют одно и то же, last() просто получают последний элемент в коллекции, :last-of-type запрашивая DOM и находя все элементы, которые являются последними по своему типу в этом родительском элементе, то есть среди братьев и сестер с одинаковым именем тега

5. Я понимаю разницу, и я не говорил, что они делают точно то же самое. Я пытался выяснить, какой из них мне следует использовать для повышения эффективности. Вы правы в том, что касается сравнения. Может быть, «:last» ( ссылка ) вместо «:last-of-type» было бы лучшим примером?

Ответ №1:

.last() быстрее.

Обратите внимание, селекторы выполняют разные выборки

:last-of-type

селектор последнего по типу

Описание: Выбирает все элементы, которые являются последними среди аналогов с одинаковым именем элемента.

.last()

.last()

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

 console.time("lastOfType");
$(".item:last-of-type");
console.timeEnd("lastOfType");

console.time("last");
$(".item").last();
console.timeEnd("last");  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

Комментарии:

1. Я понимаю различия. Спасибо, что указали на это. Знаете ли вы, почему «last()» более эффективен?

2. .last() выбирает только последний элемент селектора или коллекции. :last-of-type можно выбрать несколько элементов.

3. Я попробовал $(".item:last") vs $(".item").last() и все равно обнаружил, что это работает еще медленнее. Я все еще на самом деле не понимаю, почему это было бы медленнее… :-/

4. @JoePC проверил не все селекторы jQuery : ; не уверен, что им обычно требуется больше времени для возврата результата, чем одиночному селектору, привязанному к функции фильтрации. Внутренне jQuery должен проанализировать :pseudo строку селектора перед выбором элемента из document . Совпадают ли описания .last() и :last в документации jQuery?