How to replace numbers in a div?

Question

With the following code, I'm getting the values of "id"(almost 35), and then add 1 to each "id", so 1 will be 2 and so on. Where I'm stock, it is on how to replace that id number in the html.

This is the code that use to get the values of each id, then I push them into an array, then I run another "for loop" to add 1 to each value, but I don't how to return them to the html.

 var x = document.getElementsByClassName('p-divs'); var portfolio = new Array; for (var i = 0; i < x.length; i++) { var y = document.getElementsByClassName('p-divs')[i].getAttribute('id'); portfolio.push(y); } console.log(portfolio); var portfolio2 = new Array; for (var i = 0; i<portfolio.length; i++) { var newId; newId = parseInt(portfolio[i]) + 1; portfolio2.push(newId); } console.log(portfolio2); 

 <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 p-divs" id="1"> <div class="portfolio"> <center> <img src="images/pace.png" width="230" height="190" alt="" class="img-responsive"> </center> </div> </div> 

Answer 1

Since you're using jQuery library the code could be simple than what you've so far using .each() method :

$('.p-divs').each(function(){
  $(this).attr('id', Number(this.id) + 1);
});

Or shorter using using .attr() method callback like :

$('.p-divs').attr('id', function(){
    return Number(this.id) + 1;
});

The more clear version could be :

$('.p-divs').each(function(){
  var current_id = Number(this.id); //Get current id
  var new_id = current_id + 1;  //Increment to define the new one

  $(this).attr('id', new_id); //Set the new_id to the current element 'id'
});

Hope this helps.

 $(function(){ $('.p-divs').attr('id', function(){ return Number(this.id) + 1; }); //Just for Debug console.log( $('body').html() ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="p-divs" id="1"> <div class="portfolio"> <center>Image 1</center> </div> </div> <div class="p-divs" id="2"> <div class="portfolio"> <center>Image 2</center> </div> </div> <div class="p-divs" id="3"> <div class="portfolio"> <center>Image 3</center> </div> </div> <div class="p-divs" id="4"> <div class="portfolio"> <center>Image 4</center> </div> </div> 

Answer 2

Using native javascript, just use getattribute 's opposite: setAttribute

for (var i = 0; i < x.length; i++)
{
    var y = document.getElementsByClassName('p-divs')[i].getAttribute('id'); 
    y++;
    document.getElementsByClassName('p-divs')[i].setAttribute("id",y);
}

Answer 3

  var j = document.getElementsByClassName('p-divs');
    for (var i = 0; i < x.length; i++) {
      j[i].id = portfolio2[i];
    }  

Add this to the end of your code. Vanilla JS.

j will be an array of your divs, i will keep count of which div we're on, and we are simply accessing the "id" of each element in the "j" array and updating it to the corresponding value in your pre-populated "portfolio2" array.

Hope this helps!

PS- I would also recommend that instead of using 'new Array' to instantiate your arrays, you use the array literal notation '[]'. This is more concise and also avoids needing to put (); after Array.

Answer 4

I'd suggest, assuming I'm not missing something, and that you're able to us ES6 methods:

// converting the NodeList returned from document.querySelectorAll()
// into an Array, and iterating over that Array using
// Array.prototype.forEach():
Array.from( document.querySelectorAll('.p-divs') ).forEach(

  // using an Arrow function to work with the current element
  // (divElement) of the Array of elements,
  // here we use parseInt() to convert the id of the current
  // element into a number (with no sanity checking), adding 1
  // and assigning that result to be the new id:
  divElement => divElement.id = parseInt( divElement.id, 10 ) + 1
);

Note that updating, changing or otherwise modifying an id shouldn't be necessary in most circumstances, and having a purely numeric id may present problems for CSS selecting those elements (it's valid, but only in HTML 5, but will still be problematic).

Answer 5

for(i=0;i<$('.p-divs').length;i++){
 newId= parseInt($($('.p-divs')[i]).attr('id'))+1;
 $($('.p-divs')[i]).attr('id',newId)
}

Using Jquery attr