What exactly does jQuery's last return?

I'm having to make do mixing javascript and jQuery together until I can do a proper rewrite. It appears the code below isn't equivalent:

    var something 开发者_如何转开发= $(".image:last"); // Last element with image class?

    var element = document.getElementById("slideshow"); // HTML UL with images as children
    var lastChild = element.lastChild;

What exactly is jQuery returning?

P.S: I might be making a mistake with the actual attribution. Apologies if that's the case. I'm pretty much new to jQuery.

I believe all jQuery selectors return a jquery object - not an element.

I think if you select the first item in the jquery object, you will recieve the actual element, so:

var something = $(".image:last")[0]

will be the element you're after.

jQuery returns a jQuery object. In this case the object represents an element on your page, but it includes a huge amount of extra abilities, which are documented on the jQuery docs page: http://docs.jquery.com/Main_Page.

I like to think of the jQuery $() function a kind of superhero cape. Wrap the cape around an element on the page and it gains a bunch of super powers.

Try using something like Firebug to inspect your objects, it will display them in a way that makes a bit more sense.

jQuery will return a jQuery object which is why they are not the same.

Therefore, both:

$(".image:last") == $(lastChild)

and:

$(".image:last")[0] == lastChild

Would give you the same results, presuming that you are running those selections on the same element, of course.

Generically, $(".image:last") will find all elements with a class of image and then return the very last one it finds, wrapped in a jQuery object.

Note that they are not technically equivalent: ({} == {}) is false in JavaScript. (Thanks to @lonesomeday's comment for reminding me).

The first wraps lastChild in a jQuery object, the second grabs the actual element from within the jQuery object.

$('.image:last')

This tells jQuery to get all the elements with a class image and then get the last one. A jQuery selection (a custom object) will be returned; the element will be the only member of the selection.

Note that this returns the last .image element.

var element = document.getElementById("slideshow");
var lastChild = element.lastChild;

That gets the element with the id slideshow and then returns the last child node. Note two things: it returns a child (whereas the jQuery found the last element matching a selector) and it returns a node. Elements are one type of node, but text and comments are also nodes. If there is whitespace at the end of an element, that will be lastChild, not the last child element.

Perhaps if you can clarify the exact code that you're trying to alter, I could be more specific about what you need to do.

It very much depends in the actual DOM, whether these two approaches select the same element or not.

$(".image") will select all DOM elements with class .image (in the whole page). :last will give you the last element in the set and will return it wrapped in a jQuery object.

On the other hand:

var element = document.getElementById("slideshow");
var lastChild = element.lastChild;

will only select the last child of #slideshow (which may or may not be equivalen to $(".image:last")[0]). This returns a DOM node, not necessarily a DOM element.

For example here

<div id="slideshow">
<br />
</div>

the lastChild is a text node containing a line break.

So the things to keep in mind are:

• #slideshow might not contain all element with class .image (you could use $('#slideshow .image') to restrict the search with in jQuery.

• element.lastChild might return a text node and not an element node. You can traverse the previous siblings until you find an element node, e.g.:

  var lastChild = element.lastChild;
  while(lastChild.nodeType !== 1 && (lastChild = lastChild.previousSibling));
  
  if(lastChild) {
      // last element node found
  }