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

Question

目前我们正在使用原型和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

使用原型可以使用$$支持大部分CSS3语法的实用功能：

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

Answer 4

如果任何人发现这一点的同时在网上搜索来回答他们的问题，与原型你可以这样做：

Element.childElements().last(); 

Answer 5

对于谁仍然使用原型别人的参考，你可以添加自定义元素的方法：

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。