在IE8中获取div的最后一个子元素？

Question

除了使用在IE8中不可行的div:last-child之外，有其他方法可以获取

元素的最后一个子元素吗？

- zsharp

---

你想要CSS还是JavaScript？仅使用CSS是不可能的。 - Kenan Banks

你是否偶然使用jQuery？ - Russ Cam

"p:last-child" 将获取你选择器的最后一个段落作为其子元素。 - Sugendran

如果您在使用jQuery中遇到了语法问题，请在问题中提供您的确切代码。 - bendewey

可能是使用last-child选择器的重复问题。 - TylerH

Answer 1

在jQuery中很容易实现：

$("div :last-child")

在纯CSS中无法做到。

否则，您需要在Javascript中遍历DOM。

此外请注意区别：

• "div :last-child"：div的每个最后一个子元素；和
• "div:last-child"：每个作为最后一个子元素的div。

- cletus

---

好的回答，特别是解释选择器之间的区别。 - Jarrod Dixon

“在纯CSS中无法完成”是什么意思？你是指“不是每个浏览器都支持它”还是其他什么？ - Bobby Jack

:last-child 是 CSS3 选择器，因此只有少数浏览器支持它。如果没有它，您无法仅使用 CSS 选择最后一个子元素。 - cletus

你的回答唯一的问题是没有解决当他已经选择了父元素时该怎么办，例如他正在链接： $(".mydiv").dostuff().(get the last child somehow).dochildstuff()。我相信两种可行的方法是.children().last()和可能是.children(":last-child")。 - MikeJ

@MikeJ $(".mydiv").doStuff().children().eq(-1).doChildStuff() 可能是最优雅的。 - cletus

Answer 2

很不幸，我不知道在 CSS 中如何做到这一点，而不使用 :last-child，因为（如您所述）它无法在 IE 中正常工作。

如果您在谈论 JavaScript，则可以使用 Node.lastChild 进行操作：

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

- Daniel Lew

Answer 3

使用 jQuery 查找相应的元素：$("div:last-child").addClass("last-child");

然后使用 CSS 指定样式：div .last-child { /* 您的样式规则 */ }

- Mark

Answer 4

你可以通过编程的方式分配一个类名为 "last" 的类，然后选择它或使用 JavaScript。你也可以尝试使用一些只适用于 Microsoft IE 的 CSS 脚本。但我对它们不是很了解，也不认为这是一个好的选择。

- Tomh

---

+1，我同意。依赖JavaScript来完成这项任务是愚蠢的。只需务实地为最后一个元素添加class="last"即可。这只需要两秒钟，并且可以在任何地方使用。当它被广泛支持时，您可以轻松地将其删除并使用last-child CSS选择器。 - Nicholas Piasecki

Answer 5

我使用纯JavaScript通过从目标元素的lastChild循环回到节点来完成此操作。如果您的HTML中有空格，则lastChild可能是一个文本节点，因此我们循环直到找到一个元素节点（节点类型1）或直到我们用尽所有节点（previousSibling将返回null）。

例如，要查找页面上的最后一个元素，我从body的lastChild循环回来:

var targetElement = document.getElementsByTagName("body")[0],
    lastChildElement = targetElement.lastChild;

while (lastChildElement && lastChildElement.nodeType !== 1) {
    lastChildElement = lastChildElement.previousSibling;
}

if (lastChildElement) {
    // Do something
}

如果body中没有元素，lastChildElement将退出循环并返回null。

- Jon Gibbins

Answer 6

有一些情况，您绝对不希望直接使用$("div:last-child")。需要注意的是，在该调用之后，如果DOM发生更改（例如添加了一个新元素作为最后一个子元素），则需要更新内容。这并不仅仅是重复早期的调用；您还需要反转先前的最后一个子元素的初始调用。

如果您正在进行任何动态操作，请谨慎使用。CSS伪类是明显优于此的解决方案，但是在IE中缺乏支持。如果您的设计可以应对IE中缺乏last-child支持，并且正在使用渐进式增强，我强烈推荐使用CSS方法而不是JS。

- Bobby Jack

Answer 7

快进 >> 4年后（2013）
现在使用CSS v3（CSS3）是可行的，并且得到了所有主流浏览器的支持（其中IE版本 >= 9）。
如果您使用 IE 版本 <= 8，那么 jQuery 版本 < 1.x 将为您提供帮助（就像其他答案所指出的那样）。
阅读更多 http://www.w3schools.com/cssref/sel_last-child.asp

- mrmoje

Answer 8

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

- unigogo