lastChild not working

Question

I have the following code:

<!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>

My JavaScript code is:

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

It should alert the id of the lastchild of the div with the id 'div' which is '2' but I am getting the alert as "undefined". I don't know what I have done wrong. Please help me.

You are alerting `lastcommentq`, what's that? Your variable is called `lastchild`. — gen_Eric, Aug 20 '13 at 18:00
if you are using jquery, why are you using getElementById instead of jQuery's native selectors? — Neil S, Aug 20 '13 at 18:00
Thanks to all who have answered and commented..thank you very much.. — user1763032, Aug 20 '13 at 18:16

score 8 · Accepted Answer · answered Aug 20 '13 at 18:01

8

Your elements probably have text nodes around them, so the last child node of the outer <div> won't necessarily have an "id" attribute.

I'm not sure if all browsers support it, but there's a "lastElementChild" property that explicitly gets only elements, and not things like comment nodes or text nodes. Failing that, you could just loop through the node list looking for type 1 nodes.

answered Aug 20 '13 at 18:01

Pointy

405,095
59
585
614

1

[`lastElementChild`](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode.lastElementChild) seems to work on most browsers. – gen_Eric Aug 20 '13 at 18:03

score 0 · Answer 2 · edited Aug 20 '13 at 18:04

0

is this your wanted behaivour?

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


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

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

    </div>  
</div>

check out this fiddle for live example

http://jsfiddle.net/sHgbF/

edited Aug 20 '13 at 18:04

gen_Eric

223,194
41
299
337

answered Aug 20 '13 at 18:03

subkonstrukt

446
2
15

He seems to be looking for something like `$('#div').children('div').last().attr('id')`. – gen_Eric Aug 20 '13 at 18:05

Neil S · Answer 3 · 2013-08-20T18:19:13.293

0

this is what I would have done, but I'm not clear as to if it's what you want:

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

http://jsfiddle.net/pFjPS/

also, I don't believe classes or ids can start with numbers, so your markup is probably not valid

edit : HTML5 supports it, but is not generally recommended.

edited Aug 20 '13 at 18:19

answered Aug 20 '13 at 18:05

Neil S

2,304
21
28

1

IDs cannot start with numbers in HTML 4.01 and prior. I believe classes can start with numbers. – rink.attendant.6 Aug 20 '13 at 18:14
it doesn't look like classes can either: http://stackoverflow.com/questions/4089006/can-xhtml-and-html-class-attributes-value-start-with-a-number – Neil S Aug 20 '13 at 18:17
1

Technically they [can in HTML](http://www.w3.org/html/wg/drafts/html/master/dom.html#classes), but [not in CSS](http://www.w3.org/TR/css3-syntax/#characters) – rink.attendant.6 Aug 20 '13 at 18:21
point taken. Although HTML without CSS is somewhat useless nowadays. :) – Neil S Aug 20 '13 at 18:25

score 0 · Answer 4 · answered Aug 20 '13 at 18:06

0

In jquery:

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

answered Aug 20 '13 at 18:06

Bartosz Meister

122
8

Roger Barreto · Answer 5 · 2013-08-20T18:27:52.640

0

I would use this approach, since ID is a property and not an attribute.

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

edited Aug 20 '13 at 18:27

answered Aug 20 '13 at 18:08

Roger Barreto

2,004
1
17
21

1

["To achieve the best performance when using :last to select elements, first select the elements using a pure CSS selector"](http://api.jquery.com/last-selector/). Since we already have a pure CSS selector, `:last-child`, no need for `:last`. – rink.attendant.6 Aug 20 '13 at 18:13
Wow @rink.attendant.6 thats for the info, use last-child instead from now on – Roger Barreto Aug 20 '13 at 18:27

score 0 · Answer 6 · answered Aug 20 '13 at 18:09

The jQuery way:

// 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');

The JavaScript way:

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

Note that this works in all modern browsers and IE 9+. See lastElementChild on MDN.

lastChild not working

6 Answers6

Linked