使用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。