javascript - ":last-of-type" or ".last()" when using JQuery - Stack Overflow

admin管理员组

文章数量:1022935

:last-of-type (as of v1.9) vs .last() (as of v1.4): Either method works, but can anyone tell me which is the better method based on efficiency?

Example:

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

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

".last()" has been around longer (as of v1.4). Does JQuery have ":last-of-type" built-in, or is it just utilizing CSS and piggybacking on the browser's capability? Can anyone confirm this?

It would seem to me that ":last-of-type" would be better when applicable if this is the case.

:last-of-type (as of v1.9) vs .last() (as of v1.4): Either method works, but can anyone tell me which is the better method based on efficiency?

Example:

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

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

".last()" has been around longer (as of v1.4). Does JQuery have ":last-of-type" built-in, or is it just utilizing CSS and piggybacking on the browser's capability? Can anyone confirm this?

It would seem to me that ":last-of-type" would be better when applicable if this is the case.

• javascript
• jquery
• jquery-selectors
• css-selectors
• pseudo-class

Share Improve this question Follow asked Oct 21, 2016 at 22:46 JoePCJoePC 18422 silver badges1616 bronze badges 5

• 1 Why not run some jsperf tests? – j08691 Commented Oct 21, 2016 at 22:48
• In general, jQuery selectors will use native selectors when possible. – Barmar Commented Oct 21, 2016 at 22:53
• The selectors perform two different selections, no? – guest271314 Commented Oct 21, 2016 at 23:01
• 1 They don't do even remotely the same thing, last() just gets the last element in the collection, while :last-of-type queries the DOM and finds all elements that are last of it's type in that parent element, i.e. among siblings with the same tagname – adeneo Commented Oct 21, 2016 at 23:12
• I do understand the difference and I wasn't saying they do exactly the same thing. I was trying to figure out which one I should use for efficiency. You're right as far as parison. Maybe ":last" (link) rather than ":last-of-type" would have been a better example? – JoePC Commented Oct 21, 2016 at 23:34

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

.last() is faster.

Note, the selectors perform different selections

:last-of-type

last-of-type selector

Description: Selects all elements that are the last among siblings of the same element name.

.last()

.last()

Description: Reduce the set of matched elements to the final one in the set.

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

console.time("last");
$(".item").last();
console.timeEnd("last");

<script src="https://ajax.googleapis./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>

:last-of-type (as of v1.9) vs .last() (as of v1.4): Either method works, but can anyone tell me which is the better method based on efficiency?

Example:

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

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

".last()" has been around longer (as of v1.4). Does JQuery have ":last-of-type" built-in, or is it just utilizing CSS and piggybacking on the browser's capability? Can anyone confirm this?

It would seem to me that ":last-of-type" would be better when applicable if this is the case.

:last-of-type (as of v1.9) vs .last() (as of v1.4): Either method works, but can anyone tell me which is the better method based on efficiency?

Example:

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

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

".last()" has been around longer (as of v1.4). Does JQuery have ":last-of-type" built-in, or is it just utilizing CSS and piggybacking on the browser's capability? Can anyone confirm this?

It would seem to me that ":last-of-type" would be better when applicable if this is the case.

• javascript
• jquery
• jquery-selectors
• css-selectors
• pseudo-class

Share Improve this question Follow asked Oct 21, 2016 at 22:46 JoePCJoePC 18422 silver badges1616 bronze badges 5

• 1 Why not run some jsperf tests? – j08691 Commented Oct 21, 2016 at 22:48
• In general, jQuery selectors will use native selectors when possible. – Barmar Commented Oct 21, 2016 at 22:53
• The selectors perform two different selections, no? – guest271314 Commented Oct 21, 2016 at 23:01
• 1 They don't do even remotely the same thing, last() just gets the last element in the collection, while :last-of-type queries the DOM and finds all elements that are last of it's type in that parent element, i.e. among siblings with the same tagname – adeneo Commented Oct 21, 2016 at 23:12
• I do understand the difference and I wasn't saying they do exactly the same thing. I was trying to figure out which one I should use for efficiency. You're right as far as parison. Maybe ":last" (link) rather than ":last-of-type" would have been a better example? – JoePC Commented Oct 21, 2016 at 23:34

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

.last() is faster.

Note, the selectors perform different selections

:last-of-type

last-of-type selector

Description: Selects all elements that are the last among siblings of the same element name.

.last()

.last()

Description: Reduce the set of matched elements to the final one in the set.

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

console.time("last");
$(".item").last();
console.timeEnd("last");

<script src="https://ajax.googleapis./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>

本文标签： javascriptquotlastoftypequot or quotlast()quot when using JQueryStack Overflow