使用Prototype或jQuery实现.lastChild的最佳方法

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

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

Answer 2

Try this it has always worked for me in jQuery

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

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

Answer 3

使用Prototype，您可以使用支持大多数CSS3语法的$$实用程序函数：

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

Answer 4

如果有人在搜索网页时发现这个问题，可以使用Prototype：

Element.childElements().last();

Answer 5

For anyone else's reference who still uses Prototype, You can add custom element methods:

Element.addMethods({ ... });

I added these two among others:

first: function(element) {
    element = $(element);
    return element.childElements()[0];      
},
last: function(element) {
    element = $(element);
    var i = element.childElements().size() - 1;
    return element.childElements()[i];
}

var first = $('foo').first();
var last = $('foo').last();

The Element.first() method is sort of redundant, I use it for cleaner-looking code when chaining.

Make sure you reutrn element to enable chaining.