CODEWITHSUNDEEP
javascripthtml
Tobias Bulten Kegel
Tobias Bulten Kegel

Reputation: 23

How to find last id in a HTML with JavaScript

I have a problem with my javascript and I need to find the last id of a div in my html document. I can find it by looking at it, but I want it automatic in the JavaScript. 

<body>
  <div id="start">
    <div id="1">Text</div>
    <div id="2">Text</div>
    <div id="3">Text</div>
    <div id="4">Text</div>
    <div id="5">Text</div>
    <div id="6">Text</div>
  </div>
</body>

javascript:

 function setCookie() {
    document.cookie = '1';
 }

 function startPage() {

     var cookieValueInt = parseInt(document.cookie);
     var secondPage = cookieValueInt + 1;
     document.getElementById(document.cookie).style.visibility = 'visible';
     document.getElementById(secondPage).style.visibility = 'visible';
     if (cookieValueInt == 1) {
         document.getElementById('leftarrow').style.visibility = 'hidden';
     }

 }

 function nextPage() {
     var cookieValueInt = parseInt(document.cookie);
     var secondPage = cookieValueInt + 1;
     var newCookieValue = cookieValueInt + 2;
     document.getElementById(document.cookie).style.visibility = 'hidden';
     document.getElementById(secondPage).style.visibility = 'hidden';
     document.getElementById(newCookieValue).style.visibility = 'visible';
     document.getElementById(newCookieValue + 1).style.visibility = 'visible';
     document.getElementById('leftarrow').style.visibility = 'visible';
     document.cookie = newCookieValue;


 }

 function previousPage() {
     var cookieValueInt = parseInt(document.cookie);
     var secondPage = cookieValueInt + 1;
     var newCookieValue = cookieValueInt - 2;

     document.getElementById(document.cookie).style.visibility = 'hidden';
     document.getElementById(secondPage).style.visibility = 'hidden';
     document.getElementById(newCookieValue).style.visibility = 'visible';
     document.getElementById(newCookieValue + 1).style.visibility = 'visible';
     document.cookie = newCookieValue;
     cookieValueInt = parseInt(document.cookie);
     if (cookieValueInt == 1) {
         document.getElementById('leftarrow').style.visibility = 'hidden';
     }
 }

Upvotes: 1

Views: 768

Answers (4)

Stuart Grant
Stuart Grant

Reputation: 429

You can try using jQuery and use the following code:

$(document).ready(function(){

      var attrId = $('#start').children('div:last-child').attr('id');

 });

Also, watch out as yor HTML isn't valid as you are missing a < from the closing div tag.

Upvotes: 1

Alexander Hoffert
Alexander Hoffert

Reputation: 11

I'd recommend to use the container:

var parentEl = document.getElementById("start");
var id = parentEl.children(parentEl.children.length-1).id;

In addition, you should not use numbers as IDs, see answer of Kolink. edit: corrected code

Upvotes: 1

macramole
macramole

Reputation: 109

Using getElementsByTagName and fetching the last one from the array ?

https://developer.mozilla.org/en-US/docs/DOM/element.getElementsByTagName

Also, my advice is using jQuery :)

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324610

Do not use numbers as IDs. While it is technically valid in HTML5, it is a poor use of IDs and very prone to accidental duplicates. I would suggest using <div id="someprefix_1"> and so on. You can always take the ID and trim off the prefix to get the number.

That aside, this will work well (except in IE7 and below):

var divsWithIDs = document.querySelectorAll("div[id]"),
    lastDiv = divsWithIDs[divsWithIDs.length-1];

EDIT: If you combine this with the prefix idea, you can easily get "the last element with that kind of ID":

var divsWithPrefixedIDs = document.querySelectorAll("div[id^='someprefix_']"),
    lastDiv = dovsWithPrefixedIDs[divsWithPrefixedIDs.length-1];

Upvotes: 1

Related Questions