Question

使用以下代码，我得到＆＃34; id＆＃34;（差不多35）的值，然后为每个＆＃34; id＆＃34;添加1，因此1将是2等等。在我的库存中，它是如何替换html中的id号。

这是用于获取每个id的值的代码，然后我将它们推入一个数组，然后我运行另一个＆＃34; for循环＆＃34;为每个值添加1，但我不知道如何将它们返回到html。

＆＃13;

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

＆＃13;

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

＆＃13;

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

希望这有帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

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，我们只是访问＆＃34; id＆＃34; ＆＃34; j＆＃34;中的每个元素数组并将其更新为预先填充的＆＃34; portfolio2＆＃34;中的相应值。阵列。

希望这有帮助！

P.S.-我还建议不要使用＆＃39; new Array＆＃39;要实例化数组，可以使用数组文字表示法＆＃39; []＆＃39;。这更简洁，也避免了需要put（）;在Array之后。

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选择这些元素带来问题（＆＃39） ; s有效，但仅限于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

如何替换div中的数字？

5 个答案: