在 IE8 中获取 div 的最后一个孩子？答案

【问题标题】：Getting last-child of a div in IE8?在 IE8 中获取 div 的最后一个孩子？
【发布时间】：2010-10-07 07:25:24
【问题描述】：

除了使用div:last-child 之外，还有其他方法可以获取 div 元素的最后一个子元素，这至少在 IE8 中不起作用？

【问题讨论】：

你想要 CSS 还是 javascript。单靠 CSS 是不可能的。
你是否有机会使用 jQuery？
"p:last-child" 将获取选择器的最后一个子段落
如果您在 jquery 中使用此语法时遇到问题，请在问题中提供您的确切代码。
Using the last-child selector 的可能重复项

标签： javascript jquery css internet-explorer-8 css-selectors

【解决方案1】：

您可以通过编程方式分配“最后一个”类并选择该类或使用 javascript。您可能还可以通过使用一些 Microsoft 的 IE 仅 css 脚本的东西来试一试。但我对它们了解不多，也不认为这是一种选择。

【讨论】：

+1，我同意。依靠 JavaScript 为您做这件事是愚蠢的。只要务实，在最后一个元素中添加 class="last" 即可。它需要两秒钟，并且可以在任何地方工作。几年后，当它得到广泛支持时，您可以轻松地将其取出并使用 last-child CSS 选择器。

【解决方案2】：

在 jQuery 中很简单：

$("div :last-child")

在纯 CSS 中无法做到。

否则，您将无法在 Javascript 中遍历 DOM。

还要注意区别：

"div :last-child": div 的每个最后一个孩子；和
"div:last-child": 是最后一个孩子的每个 div。

【讨论】：

很好的答案，特别是解释了选择器的区别。
“在纯 CSS 中无法完成”是什么意思？你的意思是“不是每个浏览器都支持它”还是别的什么？
:last-child 是一个 CSS3 选择器，所以只有少数浏览器支持它。没有它，您将无法选择最后一个孩子（只有 CSS）。
你的答案的唯一问题是它没有解决当他已经选择了父元素时该怎么做，例如他正在链接：$(".mydiv").dostuff().(get the last child).dochildstuff()。我相信两种有效的方法是 .children().last() 和可能的 .children(":last-child")
@MikeJ $(".mydiv").doStuff().children().eq(-1).doChildStuff() 可能是最优雅的。

【解决方案3】：

不幸的是，我不知道在 CSS 中不使用 :last-child 的方法，它（如您所说）在 IE 中失败。

如果您在谈论 javascript，那么可以使用 Node.lastChild：

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

【讨论】：

【解决方案4】：

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

然后使用 CSS 指定演示：div .last-child { /* your rules */ }

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

在某些情况下，您绝对不想直接使用 $("div:last-child")。需要注意的一件重要事情是，这不会满足调用后对 DOM 的更改 - 例如如果将新元素添加为最后一个子元素，则需要更新内容。这也不仅仅是重复先前调用的情况。您需要反转对上一个最后一个孩子的初始调用。

如果您正在做任何模糊的动态，请注意这一点。 CSS 伪类绝对是更好的解决方案，它只是在 IE 中严重缺乏支持。如果您的设计能够应对 IE 中缺少最后一个子节点的支持，并且您正在使用渐进式丰富，那么我强烈推荐 CSS 方法而不是 JS。

【讨论】：

【解决方案7】：

我使用纯 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退出这个循环。

【讨论】：

【解决方案8】：

快进 >> 4 年后（2013 年）
现在可以使用 CSS v3 (CSS3) 并得到所有主要浏览器的支持（IE 为 >= 版本 9）。
如果您使用 IE 回到过去，那么 jQuery 版本会帮您解决问题（正如其他答案所指出的那样）。阅读更多http://www.w3schools.com/cssref/sel_last-child.asp

【讨论】：