如何替换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