Getting highest ID in Javascript

Question

I have different spans in my HTML with each decimal ID's:

<span id="1">Lorem Ipsum</span>
<span id="23">Lorem Ipsum</span>
<span id="6">Lorem Ipsum</span>

I want to get the highest ID, using javascript. In this case it should return 23.

How can I do this?

Thanks.

@justkt, http://www.w3.org/TR/html401/types.html#type-name while your HTML5 statement lacks normative reference :-P — user422039, Apr 19 '11 at 13:55
@iser422039 - [here's the spec](http://www.w3.org/TR/html5/elements.html#the-id-attribute). Note the rules: 1 character, unique in subtree, no space characters. Nothing about starting with a letter any more. — justkt, Apr 19 '11 at 13:57
@justkt, no formal definition anymore. Oh, wait, doesnt it say "work in progress"? — user422039, Apr 19 '11 at 14:23

score 6 · Accepted Answer · edited May 23 '17 at 11:53

Note these rules for your DOM ids for HTML 4 (HTML 5 has different rules). If you change to start with a letter you can remove the numeric part by using substring or a regular expression before parsing. The below code assumes a prefix (such as 's') of a letter before your numeric portion and is vanilla JS, no jQuery required.

// get all spans
var spans = document.getElementsByTagName("span");
var length = spans.length;
// variable for the highest one
var highest = 0;
// loop over to find the highest ID by looking at the property parsed as an int
for(var i = 0; i < length; i++) {
    var id= parseInt(spans[i].id.substring(1, spans[i].id.length), 10);
    if(id > highest) {
        highest = id;
    }
}
alert(highest);

see it in action

You can also do it in jQuery:

var highest = 0;
$("span").each(function() {
    var id = parseInt(this.id.substring(1, this.id.length), 10);
    if(id > highest) {
        highest = id;
    }
});
alert(highest);

See it in action

score 2 · Answer 2 · answered Apr 19 '11 at 13:23

2

IDs must start with a letter. They cannot be numbers alone.

answered Apr 19 '11 at 13:23

Diodeus - James MacFarlane

112,730
33
157
176

+1 http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html – Vincent Mimoun-Prat Apr 19 '11 at 13:25
2

Not, they "must" begin with a letter, like a JS variable, for example. – Capsule Apr 19 '11 at 13:26
@Sergey: In HTML4, "must" is correct; although it is technically possible to create invalid markup (and that some browser are capable of guessing your probable intent), that doesn't make it any less invalid. – Piskvor left the building Apr 19 '11 at 13:28

score 2 · Answer 3 · answered Apr 19 '11 at 13:25

var els = document.getElementsByTagName('span'),
    highest = 0,
    i,
    cur;

for (i = 0; i < els.length; i++) {
    cur = parseInt(els[i].id, 10);
    if (els[i].id > highest) {
        highest = cur;
    }
}

highest will contain the highest value.

NB however that, in HTML4, it is illegal for an element ID to start with a non-alphabetic character:

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods ("."). (source)

This is not an issue if you are using HTML5. And, what's more, it will probably work anyway.

score 0 · Answer 4 · answered Apr 19 '11 at 13:30

0

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

source

and my solution is:

var item = $('span').get(0);
var max_id = parseInt($(item).attr('id'));
$('span').each(function(){
   var curr_id = parseInt($(this).attr('id'));
   if (curr_id > max_id){
       max_id = curr_id;
       item = $(this);
   }
});

answered Apr 19 '11 at 13:30

Andrei Andrushkevich

9,905
4
31
42

1

For HTML 5 those restrictions are [largely removed](http://mathiasbynens.be/notes/html5-id-class). – justkt Apr 19 '11 at 13:31

Getting highest ID in Javascript

4 Answers4