Question

我有以下代码：

<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8"/>
<script type = "text/javascript" src = "js/jquery.js" ></script>
</head>
<body>
<div id = 'div'>
    <div id = "1">

    </div>     
    <div id = "2">

    </div>  
</div>         
</body>
</html>

我的JavaScript代码是：

$(document).ready(function(){
    var lastcommentq   = document.getElementById('div').lastChild.id;
    alert(lastcommentq);
});

它应警告div的lastchild的id，id为'div'，即'2'，但我收到警告为“未定义”。我不知道我做错了什么。请帮帮我。

Answer 1

您的元素可能周围有文本节点，因此外部<div>的最后一个子节点不一定具有“id”属性。

我不确定是否所有浏览器都支持它，但是有一个“lastElementChild”属性只显示元素，而不是注释节点或文本节点。如果做不到这一点，你可以循环遍历节点列表，寻找类型1节点。

Answer 2

这是你想要的行为吗？

$(document).ready(function(){
     var lastchild   = $("div").last().attr("id")
     alert(lastchild);
     });


<div id="div">
    <div id ="1">

    </div>     
    <div id="2">

    </div>  
</div>

查看这个小提琴的实例

http://jsfiddle.net/sHgbF/

Answer 3

这就是我本来会做的，但我不清楚它是否是你想要的：

$(function () {
    var lastchild = $('#div div:last-child').attr('id');
    alert(lastchild);
});

http://jsfiddle.net/pFjPS/

另外，我不相信课程或ID可以从数字开始，因此您的标记可能无效

编辑： HTML5支持它，但通常不建议使用。

Answer 4

在jquery中：

$(function(){
  alert($("#div :last-child").attr('id'));
});

Answer 5

我会使用这种方法，因为ID是属性而不是属性。

$(function () {
    var lastchild = $('#div div:last-child').prop('id');
    alert(lastchild);
});

Answer 6

jQuery方式：

// assuming the last child is always a div
var lastcommentq = $('#div > div:last-child').attr('id');

// alternatively
var lastcommentq0 = $('#div').children('div').last().attr('id');

JavaScript方式：

var lastcommentq = document.getElementById('div').lastElementChild.id;

请注意，这适用于所有现代浏览器和IE 9+。请参阅MDN上的lastElementChild。

lastChild不工作

6 个答案: