There is html:

<div class="my-class-1">user-1</div> <div class="my-class-1">user-2</div> <div class="my-class-1">user-2</div> <div class="my-class-1">user-1</div> <div class="my-class-1">user-2</div>

Is it possible to somehow change classes via JS from my-class-1 to my-class-2 where is the content of the user-2 block?

    3 answers 3

    or even easier:

     var items = document.body.querySelectorAll('.my-class-1'); for(var i = 0; i < items.length; i++){ var item = items[i]; if(item.innerHTML === "user-2"){ if( item.className === "my-class-1" ){ item.className = "my-class-2"; } } } 
     .my-class-2 { color: red; } 
      <div class="my-class-1">user-1</div> <div class="my-class-1">user-2</div> <div class="my-class-1">user-2</div> <div class="my-class-1">user-1</div> <div class="my-class-1">user-2</div> 

       var items = document.body.querySelectorAll(".my-class-1"); for (var i = 0; i < items.length; i++) { if (!(items[i].innerHTML).indexOf('user-2')) { items[i].className = "my-class-2"; } } 
       .my-class-2 { color: red; } 
       <div class="my-class-1">user-1</div> <div class="my-class-1">user-2</div> <div class="my-class-1">user-2</div> <div class="my-class-1">user-3</div> <div class="my-class-1">user-2</div>

      • elements have no attribute my-class-1 , so removeAttribute does not help here - Grundy
      • @Grundy sorry, it remains from the previous version ... - C.Raf.T
       let items = document.body.querySelectorAll( '.my-class-1' ); let length = items.length; const TEXT_CONTENT_PATTERN = "user-2"; for( let i = 0; i < length; i++ ){ let item = items[ i ]; console.log(item.textContent) if( item.textContent === TEXT_CONTENT_PATTERN ){ if( item.classList.contains( 'my-class-1' ) ){ item.classList.remove( 'my-class-1' ); } item.classList.add( 'my-class-2' ); } }

      Or if the conditions are exactly the same as you brought up in the question, then you can write shorter -

       document.body.querySelectorAll( '.my-class-1' ) .forEach( item => item.textContent === "user-2" ? item.className = "my-class-2" : null );

      Or even like this -

       document.body.querySelectorAll( '.my-class-1' ) .forEach( item => item.textContent === "user-2" && (item.className = "my-class-2") );