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表示“ class”的当前值。只是想让每个类名+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>

Answer 1

也许：

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

Answer 2

使用jQuery.each()遍历$allp中的每个元素，然后使用.attr()设置新的类名。

var $allp = $("div p")

$.each($allp, (index, el) => {
  const $newEl = $(el).attr('class', `newClass-${index + 2}`)
  console.log($newEl[0])
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.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>

Codepen

Answer 3

只需忽略for循环：

var allp=$("div p");    
allp.attr("class",(i,n)=>Number(n)+1);
console.log(allp)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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>

Answer 4

您只需要获取每个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>

Answer 5

您可以使用jquery。获取类，将其解析为int并递增。如果您的班级中没有数字字符，则将引发错误，因此可能要检查!isNaN。

$('div p').each(function(){
    console.log(parseInt($(this).attr('class')) + 1);
});

不能通过使用attr（）来更改“类”

5 个答案: