javascript - 无法使用 attr() 更改“类”

Question

var allp = $("div p");
for (var i = 0; i < allp.length; i++) {
  allp.attr("class", function(i, n) {
    n += 1;
    return n;
  });
  console.log(allp[i]);
}

<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<div>
  <p class="1">1</p>
  <p class="2">2</p>
  <p class="3">3</p>
  <p class="4">4</p>
  <p class="5">5</p>
</div>

i表示索引，n 表示“类”的当前值。只是想让每个类名+1，但没有做到这一点。console.log 是：

<p class="11111">1</p>  
<p class="21111">2</p>  
<p class="31111">3</p>      
<p class="41111">4</p>  
<p class="51111">5</p>

预期输出：

    <p class="2">1</p>  
    <p class="3">2</p>  
    <p class="4">3</p>      
    <p class="5">4</p>  
    <p class="6">5</p>

标签： javascriptjqueryhtml

Answer 1

您只需要在将每个 p 元素的类属性值转换为数字后将其递增，然后将此值分配给与新文本值相同的元素。

var allp=$("div p");    
for(var i=0;i<allp.length;i++){     
  $(allp[i]).text(Number($(allp[i]).attr("class")) + 1);
console.log(allp[i]);   
}

<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<div>       
  <p class="1">1</p>    
  <p class="2">2</p>    
  <p class="3">3</p>        
  <p class="4">4</p>    
  <p class="5">5</p>
</div>