can't change "class" by using 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 means index, n means the current value of "class". Just wanted to make each classname +1,but failed to do that.And the console.log is :

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

Expected output:

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

Check this post: [https://stackoverflow.com/questions/3452778/jquery-change-class-name](https://stackoverflow.com/questions/3452778/jquery-change-class-name) — JTFRage, Jan 25 '19 at 16:06
That's not the result I'm seeing: https://jsfiddle.net/4f7oh2ja/ — David, Jan 25 '19 at 16:08
I assume the `console.log` isn’t exactly like that and you want `return Number(n) + 1;` with no `n += 1` and no loop? — Ry-, Jan 25 '19 at 16:08
@David class is being returned as
1
but still not what the OP was looking for. — Web Nexus, Jan 25 '19 at 16:10
@HenslerSoftware: It may not be what the OP is looking for, but it's also not what the OP claims to be the current output. Observe the output in the console, and observe the output in the question above. Look really closely. — David, Jan 25 '19 at 16:11
I made some mistakes in the post (the output) and I have corrected it — Chor, Jan 26 '19 at 04:40

score 0 · Answer 1 · answered Jan 25 '19 at 16:16

0

Maybe:

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

answered Jan 25 '19 at 16:16

German Burgardt

375
1
5

So I didn't make n be a number? – Chor Jan 25 '19 at 16:19
No, in your code 'n' is a string, and instead of adding you are concatenating – German Burgardt Jan 25 '19 at 16:21
Thanks,you are right.But bacause of the implicit iteration of jQuery,here the for loop is unnecessary. – Chor Jan 26 '19 at 04:43

ksav · Answer 2 · 2019-01-26T15:09:09.460

Use jQuery.each() to iterate through each element in $allp, then .attr() to set the new class name.

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

score 0 · Accepted Answer · answered Jan 25 '19 at 16:22

0

Simply ignore for loop:

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>

answered Jan 25 '19 at 16:22

FZs

16,581
13
41
50

the for loop here is unnecessary? – Chor Jan 25 '19 at 16:45
@user10968312 You can do it by `for` loop, but it's more simple without it. Additionally, if you make a loop and pass a function to `.attr()`, then your code will be processed multiple. – FZs Jan 25 '19 at 17:07
But if I dont use for loop ,what will the i mean here?It should be index when using for loop – Chor Jan 25 '19 at 17:11
@user10968312 `i` is passed to the function that processes the 'reclassing'. [It's the index](http://api.jquery.com/attr/#attr-attributeName-function), but it isn't used in this example. – FZs Jan 25 '19 at 17:13
By passing i and n without for loop, the function can still operate each p's classname,right? – Chor Jan 25 '19 at 17:17
@user10968312 Yes, if you pass a function to `.attr()`, it will *loop over* each element as a `for` loop do, but this way is more simple to read and use. – FZs Jan 25 '19 at 17:20

score 0 · Answer 4 · answered Jan 25 '19 at 16:54

You just need to get the class attribute value of each p element increment it after converting it to a Number and then assign this value to the same element as the new text value.

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>

I forgot to post the expected output before.I mean changing the classname instead of changing the content of p — Chor, Jan 26 '19 at 02:37

score -1 · Answer 5 · answered Jan 25 '19 at 16:15

You can use jquery. Get the class, parse it to int and increment. It'll throw an error if you have none numeric characters in your class though so may want to do a check !isNaN.

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

can't change "class" by using attr()

5 Answers5