La mejor manera de implementar .lastChild usando Prototype o jQuery

Question

Actualmente estamos utilizando prototype y jQuery como nuestros frameworks js. En este momento, jQuery está configurado en $ j() para evitar conflictos de prototipo.

En el pasado, hemos utilizado una gran cantidad de prototipos Element.down(), Element.next() y Element.previous() para recorrer el DOM. Sin embargo, necesito una forma simple de recuperar el último elemento hijo. Sé que puedo recorrer una matriz mediante el uso de Element.childElements() pero me gustaría algo en línea que se lea limpiamente y se pueda canalizar.

Sólo pensé en preguntar antes de reinventar la rueda. He aquí un fragmento de código que ha lastChild en ella que necesita ser reemplazado:

_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

Chicos, tenga en cuenta que las funciones de selector devuelven matrices de elementos (no elementos individuales), por lo que debe direccionar el elemento en la matriz de resultados por índice: [0].

Código de prototipo

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

Código de 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]; 

Código de sabor de vainilla Javascript

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

También tenga en cuenta que estos pueden devolver null si el elemento padre tiene ningún niño nodos.

• Some info on the CSS :last-child selector

Answer 2

Prueba esto siempre ha trabajado para mí en jQuery

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

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

Answer 3

Usando Prototype puede utilizar la función de utilidad $$ que admite la mayoría de la sintaxis de CSS3:

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

Answer 4

En caso de que alguien encuentra este tiempo buscando en la web para responder a su pregunta, con prototipo que puede hacer:

Element.childElements().last(); 

Answer 5

Para cualquier otra persona de referencia que todavía utiliza Prototype, Usted puede agregar métodos de elementos personalizados:

Element.addMethods({ ... });

que añaden estos dos entre otros:

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

El método Element.first() es una especie de redundancia, lo uso para el código-limpiador mirando al encadenar.

Asegúrate de reutrn element para habilitar el encadenamiento.