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

我建議，假設我絕不錯過你是能夠的東西，和我們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選擇問題ements（它是有效的，但只在HTML 5中，但仍然有問題）。

Answer 3

使用原生的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 4

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」數組中。

希望這會有所幫助！

P.S.-我還建議您不要使用'new Array'來實例化數組，而是使用數組文字符號'[]'。這更簡潔，也避免了需要放（）; Array之後。

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