Question

Please see this image:

Can someone explain the difference?

Edit

Let me indicate what puzzles me. Notice that:

1. $row.is('tr.items:last') === false
2. $row[0].id === $('tr.items:last')[0].id

The two statements seem to contradict each other. The first tells us that $row is not the last of tr.items. But the second one tells that $row is exactly $('tr.items:last'), i.e. the last of tr.items.

No such thing occurs with the :last-of-type selector.

What is going on here?

Answer 1

jQuery does a different filter mechanism for .is when it comes to set filters like :last. The point is that it normally uses .filter on the current set and checks whether there are any elements left after filtering.

This works for cases such as:

$("<a></a><b></b>").is("b");  // true, there is a <b> after filtering

But for :last this fails, because such a filter is relative to the set. Consider a document with two elements:

$("a:first").is("a:last");  // would be true if the same method was used,
                            // because in the set with the first <a> element,
                            // the last <a> element is that element. So filtering
                            // with `a:last` yields something, and `.is` gets you
                            // true.

This is in contrast with what you may expect. So, jQuery instead searches for a:last in the current context and checks whether a:first is apparent in that set.

The problem in your case is that $(ev.target) (in handleKeyDown) makes the context to be that input element and not the document (which is the usual case). No tr.items can be found in that context and you get false. This is arguably a bug in jQuery.

Anyway, what you can do is checking against a set instead. It is faster to use the corresponding functions, anyway:

$row.is( $("tr.items").last() );  // true