2

I have div element with dynamic Id.

<div id="parent">
    <div id="elmn1"></div>
    <div id="id-has-changed"></div>
    <div id="elmn3"></div>
    <div id="elmn4"></div>
    <div id="id-has-changed-by-user-from-input-field"></div>
</div>

All element id (except #parent) are editable by user from an input field, so the last child of #parent may has new id set by user.

I want to check the element with the highest number (4) at the last part of their id and I want to append a new element with the next id.

var nextId = "elmn" + (numberOfLastElement + 1);
var newElmn = document.createElement("div");

newElmn.id = nextId;
document.getElementById("parent").appendChild(newElmn);

In this paricular case the new element will has id="elmn5".

My question is, how to get numberOfLastElement?

4
  • Is the hightest number always the last element that starts with this id? If not, you will have to loop through all elements to find the hightest id
    – Jerodev
    Commented Oct 3, 2014 at 14:29
  • if its always the last one, you just have to append to your div parent
    – starvator
    Commented Oct 3, 2014 at 14:32
  • No, user can changes any id from input field, so the last element can has new id set by user. Commented Oct 3, 2014 at 14:38
  • Fixed my answer. It's still more limited than the excepted one. So I'm leaving it here just as a syntax alternative.
    – PM 77-1
    Commented Oct 3, 2014 at 16:17

3 Answers 3

2

Updated

Final version of Fiddle

var myEl = document.getElementById('parent').children;
var highest = null;
var idName= null;

if (myEl){

for (var ii=0;ii<myEl.length;ii++){
     
     var temp = myEl[ii].getAttribute('id');
    
    
    var intval = temp.match(/\d+/g)
     
    
    if (intval !=null){
        
        if(intval>highest){
            
         
            highest = intval;
            idName = temp;
        }
        
        
    }
  

  }

}

console.log(idName);

Leaving the code below for historical info

Here is a working JSFiddle.

var myEl = document.getElementById('parent').children;
var count = 0;
      if (myEl) {
            var match = 'elmn';
            for (var ii = 0; ii < myEl.length; ii++) {
                var temp = myEl[ii].getAttribute('id');
                if (temp.indexOf(match) == 0) {
                    count++
                }
            }
        }
        alert('count is ' + count);
4
  • I believe OP wants new element to have id elmn5 not elmn3 as your suggested solution
    – laaposto
    Commented Oct 3, 2014 at 14:43
  • Indeed. It's a little unclear in the question. I am editing now. But he SHOULD be able to solve it from here. :)
    – user796446
    Commented Oct 3, 2014 at 14:45
  • Thanks for accepting. Note, there is a bug which I am fixing shortly. Check back in two minutes for an update.
    – user796446
    Commented Oct 3, 2014 at 14:59
  • Thanks @E.Maggini you resolve it with a short of code. Commented Oct 3, 2014 at 15:02
2

Here is the logic:

Get all the elements what have id="elmnx" where x=1,2, etc. $("[id*='elmn']")

Get the last of them. last()

Get its id.attr('id')

Substring to get the number at the end. substring(4)

Make it an int so that you can add +1. parseInt()

Try:

var numberOfLastElement=parseInt($("[id*='elmn']").last().attr('id').substring(4));
1
  • I believe OP is trying to find any dynamic element ending in a number and then find the highest one. :) Additionally, this solution requires the addition of jQuery.
    – user796446
    Commented Oct 3, 2014 at 14:54
1

Something like this, assuming elmn prefix in all applicable IDs:

function MaxElemNo() {
  var prefix = "elmn";
  var parent = document.getElementById("parent");
  var elements = parent.querySelectorAll("[id^='"+ prefix + "']");
  var lastElemNo = 0;
  for (var i=0; i<elements.length; i++) {
     var el = elements[i].id;
     var num = + el.substring(prefix.length, el.length);
     lastElemNo = Math.max(lastElemNo, num) 
  }
  return lastElemNo;  
}    
console.log(MaxElemNo());

JS Fiddle

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.