La meilleure façon de mettre en œuvre .lastChild utilisant Prototype ou jQuery

Question

Actuellement, nous utilisons prototype et jQuery que nos cadres js. À l'heure actuelle, jQuery est défini sur $ j() pour éviter les conflits de prototype.

Dans le passé, nous avons utilisé beaucoup de Element.down(), Element.next() et Element.previous() pour traverser le DOM de prototype. Cependant, j'ai besoin d'un moyen simple pour récupérer le dernier élément enfant. Je sais que je peux faire une boucle dans un tableau en utilisant Element.childElements() mais j'aimerais que quelque chose en ligne soit lu proprement et puisse être pipeliné.

Je pensais juste que je demande avant d'aller réinventer la roue. Voici un extrait de code qui a lastChild dans ce qui doit être remplacé:

_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

Les gars, notez que les fonctions de sélection renvoient des réseaux d'éléments (non éléments simples), vous devez donc adddress l'élément du tableau de résultat par index: [0].

code

en 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 dans 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 dans vanilles javascript

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

Notez également que ceux-ci peuvent retourner null si l'élément parent n'a pas d'enfant nœuds.

• Some info on the CSS :last-child selector

Answer 2

Essayez cela, il a toujours travaillé pour moi dans jQuery

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

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

Answer 3

En utilisant Prototype vous pouvez utiliser la fonction d'utilitaire $$ qui prend en charge la majeure partie de la syntaxe CSS3:

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

Answer 4

Au cas où quelqu'un trouve cela tout en recherchant le Web pour répondre à leur question, Prototype que vous pouvez faire:

Element.childElements().last(); 

Answer 5

Pour toute personne de référence d'autre qui utilise encore Prototype, vous peut ajouter des méthodes d'éléments personnalisés:

Element.addMethods({ ... });

j'ajouté ces deux entre autres:

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

La méthode Element.first() est une sorte de redondance, je l'utilise pour le code plus propre à la recherche en enchaînant.

Assurez-vous d'activer reutrn element enchaînant.