Question

目前我们正在使用prototype和jQuery作为我们的js框架。现在，jQuery设置为$ j（）以防止原型冲突。

过去，我们使用了很多原型的Element.down（），Element.next（）和Element.previous（）来遍历DOM。但是，我需要一种简单的方法来检索最后一个子元素。我知道我可以通过使用Element.childElements（）循环一个数组，但我想要一些内联，干净利落地读取并可以流水线化。

在我重新发明轮子之前，我想过会问。这是一段包含lastChild的代码片段，需要更换：

_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

伙计们，请注意，选择器函数返回元素数组（而不是单个元素），因此必须通过索引在结果数组中添加元素：[0]。

原型中的代码

//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];

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

普通香草javascript中的代码

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

另请注意，如果父元素没有子节点，则这些可以返回null。

Some info on the CSS :last-child selector

Answer 2

试试这个，它一直在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

对于仍然使用Prototype的其他人的参考，您可以添加自定义元素方法：

Element.addMethods({ ... });

我添加了这两个：

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();

Element.first()方法有点多余，我在链接时使用它来获得更清晰的代码。

确保reutrn element启用链接。

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

5 个答案: