Best way to implement .lastChild using Prototype or jQuery

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;
    }

From stackoverflow Travis Johnson

• Try this it has always worked for me in jQuery

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

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

  Travis Johnson : What if the parent doesn't have an ID value?

  Mike Fielden : Yes I think that snipet will get the element with id of parent not the parent element
  From Nick Berardi

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

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

  From John Topley

• 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
  From Leo