Change name of all classes in jQuery

user_712430 0
Viewed 40

I have a large table I clone in jQuery and want to add an ending to all class names of this table. Trying to understand how to accomplish this.

Example table before class change:

<table>
 <tr class="row1 class1"><td>row 1</td></tr>
 <tr class="row2 class2"><td>row 2</td></tr>
 <tr class="row3 class3"><td>row 3</td></tr>
 <tr class="row4 class4"><td>row 4</td></tr>
 <tr class="row5 class5"><td>row 5</td></tr>
</table>

After class change:

<table>
 <tr class="row1_add class1_add"><td>row 1</td></tr>
 <tr class="row2_add class2_add"><td>row 2</td></tr>
 <tr class="row3_add class3_add"><td>row 3</td></tr>
 <tr class="row4_add class4_add"><td>row 4</td></tr>
 <tr class="row5_add class5_add"><td>row 5</td></tr>
</table>
jquery
4 Answers

Try to do like that

$( "table tr" ).each(function() {
  const tr = $(this);
  const new_classes = tr.attr('class').split(' ').map((i) => i + '_add');
  tr.attr("class", new_classes.join(' '));
});
user_107545350

Or you could do this:

document.querySelectorAll('tr').forEach(tr=>
 tr.className=[...tr.classList].map(c=>c+"_add").join(' ') )
.row1_add,.row2_add,.row3_add,
.row4_add,.row5_add { background-color: yellow }
.class1_add,.class2_add,.class3_add,
.class4_add,.class5_add { color:red }
<table>
 <tr class="row1 class1"><td>row 1</td></tr>
 <tr class="row2 class2"><td>row 2</td></tr>
 <tr class="row3 class3"><td>row 3</td></tr>
 <tr class="row4 class4"><td>row 4</td></tr>
 <tr class="row5 class5"><td>row 5</td></tr>
</table>

You can do it with jQuery too, of course, but in this case Vanilla-JS is just as short and easy.

user_26100610

Using attr(attributeName, function) which will internally iterate all the matching selectors and perform same operation on each instance

$('tr').attr('class', (_,curr) => curr.split(' ').map(s => `${s}_add`).join(' '));
.row1_add,.row2_add,.row3_add,
.row4_add,.row5_add { background-color: yellow }
.class1_add,.class2_add,.class3_add,
.class4_add,.class5_add { color:red }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
 <tr class="row1 class1"><td>row 1</td></tr>
 <tr class="row2 class2"><td>row 2</td></tr>
 <tr class="row3 class3"><td>row 3</td></tr>
 <tr class="row4 class4"><td>row 4</td></tr>
 <tr class="row5 class5"><td>row 5</td></tr>
</table>

user_11759660

Here is the solution:

function replaceClassNames() {
  const min = 1
  const max = 5
    for (i = min; i <= max; i++) {
       const currRowClassWithDot = '.row' + i
       const currClassClassWithDot = '.class' + i
       
       const currRowClass = 'row' + i
       const currClassClass = 'class' + i
       
       const toBeRowClass = 'row' + i + '_add'
       const toBeClassClass = 'class' + i + '_add'
       
       $(currRowClassWithDot).addClass(toBeRowClass).removeClass(currRowClass)
       $(currClassClassWithDot).addClass(toBeClassClass).removeClass(currClassClass)
   }
}

$( document ).ready(function() {
    replaceClassNames()
});

Live demo

user_104278070
Related