Best way to implement .lastChild using Prototype or jQuery

Question

Currently we are using prototype and jQuery as our js frameworks. Right now, jQuery is set to $j() to prevent conflicts from prototype.

In the past, we've used a lot of prototype's Element.down(), Element.next(), and Element.previous() to traverse the DOM. However, I need a simple way to retrieve the last child element. I know i can loop through an array by using Element.childElements() but I would like something inline that reads cleanly and can be pipelined.

Just thought I would ask before I go reinventing the wheel. Here's a snippet of code that has lastChild in it that needs to be replaced:

_find : function(rows, address) {
     var obj = null;
     for (var i=0; i < rows.length && obj == null; i++) {
      if (rows[i].down().className == 'b')
       obj = this._find(rows[i].lastChild.down().down().childElements(), address);
      else if (rows[i].lastChild.getAttribute('tabAddress') == address)
       return rows[i].lastChild;
     }
     return obj;
    }

Answer 1

Try this it has always worked for me in jQuery

var lastChild = $("#parent :last-child");

http://docs.jquery.com/Selectors/lastChild

Answer 2

Using Prototype you can use the $$ utility function which supports most of the CSS3 syntax:

var lastChild = $$(".b:last-child")[0];

Answer 3

Guys, note that the selector functions return arrays of elements (not single elements), so you must adddress the element in the result array by index: [0].

Code in prototype

//if you only have the id of the parent
var lastChild = $$("#parent :last-child")[0]; 
//or
//if you have the actual DOM element
var lastChild = $(element).select(":last-child")[0];

Code in Jquery

//if you only have the id of the parent
var lastChild = $("#parent :last-child")[0]; 
//or
//if you have the actual DOM element
var lastChild = $(":last-child", element)[0];

Code in plain vanilla javascript

var element = document.getElementById("parent");
var lastChild = element.childNodes[element.childNodes.length - 1];

Also note that these can return null if the parent element has no child nodes.

• Some info on the CSS :last-child selector