如何替換div中的數字？

Question

使用以下代碼，我得到“id”的值（差不多35），然后為每個“id”添加1，因此1將是2，依此類推。 我在哪里庫存，它是如何替換html中的id號碼。

這是用於獲取每個id的值的代碼，然后我將它們推入一個數組，然后我運行另一個“for循環”為每個值添加1，但我不知道如何將它們返回到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

由於您使用的是jQuery庫，因此代碼可能比您目前使用的.each()方法簡單：

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

或者使用.attr()方法回調更短，如：

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

更清晰的版本可能是：

$('.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'
});

希望這可以幫助。

 $(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

使用本機javascript，只需使用getattribute的對面： 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];
    }  

將其添加到代碼的末尾。 香草JS。

j將是你的div的數組，我將繼續計算我們所在的div，我們只是訪問“j”數組中每個元素的“id”並將其更新為前面的相應值填充“portfolio2”數組。

希望這可以幫助！

PS-我還建議你不要使用'new Array'來實例化數組，而是使用數組文字符號'[]'。 這更簡潔，也避免了需要put（）; 在陣列之后。

Answer 4

我建議，假設我沒有遺漏某些東西， 並且你能夠使用ES6方法：

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

請注意，在大多數情況下，更新，更改或以其他方式修改id不是必需的，並且具有純數字id可能會給CSS選擇這些元素帶來問題（它是有效的，但僅在HTML 5中，但仍然存在問題）。

Answer 5

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

使用Jquery attr