Travis Johnson Travis Johnson - 5 months ago 10
Javascript Question

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

Leo Leo
Answer

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.

Comments