Obtenir le dernier enfant d'un div dans IE8?

Existe-t-il une autre façon d'obtenir le dernier enfant d'un élément div autre que d'utiliser div:last-child , qui ne fonctionne pas dans IE8 au moins?

Dans jQuery c'est facile:

 $("div :last-child") 

En CSS pur, il ne peut pas être fait.

Sinon, vous êtes coincé avec le déplacement du DOM en version Javascript.

Notez également la différence:

  • "div :last-child" : chaque dernier enfant d'un div; et
  • "div:last-child" : chaque div qui est un dernier enfant.

Malheureusement, je ne connais pas un moyen de le faire en CSS sans utiliser: last-child, qui (comme vous l'avez déclaré) échoue dans IE.

Si vous parlez de javascript, il est possible d'utiliser Node.lastChild:

 var div = document.getElementById("mydiv"); var lastChild = div.lastChild; 

Utilisez jQuery pour trouver les éléments appropriés: $("div:last-child").addClass("last-child");

Ensuite, utilisez CSS pour spécifier la présentation: div .last-child { /* your rules */ }

Vous pouvez attribuer une classe «dernière» par programme et sélectionner celle-ci ou utiliser javascript. Vous pourriez également avoir une photo en utilisant certains des micros de Microsoft Microsofts seulement css script thingies. Mais je ne connais pas grand-chose à ce sujet, je ne considère pas cela comme une option.

Je le fais avec un JavaScript pur en recoupant les nœuds à partir du dernier élément de l'élément cible. S'il y a des espaces dans votre HTML, lastChild peut être un nœud de texte, donc nous nous tournons jusqu'à ce que nous trouvions un noeud d'élément (type de noeud 1) ou jusqu'à ce que nous étions à l'écart des noeuds (previousSibling renverrait null).

Par exemple, pour trouver le dernier élément d'une page, je me rapproche du dernier élément du corps:

 var targetElement = document.getElementsByTagName("body")[0], lastChildElement = targetElement.lastChild; while (lastChildElement && lastChildElement.nodeType !== 1) { lastChildElement = lastChildElement.previousSibling; } if (lastChildElement) { // Do something } 

S'il n'y a pas d'élément dans le corps, lastChildElement quittera cette boucle comme nul.

Il y a quelques cas dans lesquels vous ne voulez certainement pas utiliser $ ("div: last-child") hors de la boîte. Une chose importante à noter est que cela ne permettra pas de modifier le DOM après cet appel – par exemple si un nouvel élément est ajouté en tant que dernier enfant, vous devrez mettre à jour les choses. Ce n'est pas seulement un cas de répétition de l'appel précédent, non plus; Vous devrez renverser l'appel initial sur le dernier enfant précédent.

Si vous faites quelque chose de vaguement dynamique, méfiez-vous de cela. La pseudo-classe CSS est certainement la solution supérieure, elle a simplement un manque de soutien horrible dans IE. Si votre conception peut faire face à la perte du soutien du dernier enfant dans IE, et que vous utilisez un enrichissement progressif, je recommande fortement l'approche CSS par rapport à JS.

Avance rapide >> 4 ans plus tard (2013)
Il est maintenant possible avec CSS v3 (CSS3) et est pris en charge par tous les principaux navigateurs (avec IE étant> = version 9).
Si vous voyagez dans le temps avec IE <= version 8 , alors jQuery version <1.x vous trier (tout comme les autres réponses l'ont souligné).
En savoir plus http://www.w3schools.com/cssref/sel_last-child.asp

 var divs = $("id").getElementsByTagName('div'); var lastChild = divs[divs.length-1];