19

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

4

8 回答 8

55

在 jQuery 中很简单：

$("div :last-child")

在纯 CSS 中它无法完成。

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

还要注意区别：

  • "div :last-child": div 的每个最后一个孩子；和
  • "div:last-child"：每个 div是最后一个孩子。
于 2009-02-12T21:54:36.103 回答
21

不幸的是，我不知道没有使用 :last-child 的方式在 CSS 中执行此操作，（如您所说）在 IE 中失败。

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

var div = document.getElementById("mydiv");
var lastChild = div.lastChild;
于 2009-02-12T21:55:22.047 回答
6

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

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

于 2009-02-13T04:46:48.827 回答
4

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

于 2009-02-12T21:54:21.847 回答
3

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

于 2011-12-09T22:00:34.107 回答
2

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

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

于 2009-10-30T17:38:43.797 回答
1

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

于 2013-07-04T00:30:44.407 回答
-1 
var divs = $("id").getElementsByTagName('div');
var lastChild = divs[divs.length-1];
于 2009-02-13T05:03:16.293 回答