Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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;
    }
like image 610
taco Avatar asked Oct 22 '08 19:10

taco


2 Answers

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
like image 75
Leo Avatar answered Oct 26 '22 19:10

Leo


Try this it has always worked for me in jQuery

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

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

like image 36
Nick Berardi Avatar answered Oct 26 '22 18:10

Nick Berardi