javascript - How to add and remove class dynamically to child div based on value in Jquery

Question

if data value is matching with any div inside requestsampler class then dynamically add new class(sampleClass) to test class inside the matching container

js:

var data = **somevalue**;

data is dynamic value

html:

<div class="requestsampler">
  <div class= "**somevalue**">
    <div class="test">  // add new class <div class="test sample class">
     //
    </div>
    
  </div>
   <div class= "somevalue2">
     <div class="test">
      //
    </div>
    
  </div>
   <div class= "somevalue3">
     <div class="test">
      //
    </div>
    
  </div>
</div>

tried not working:

$('.requestsampler').hasClass(data) {
  $(.'requestsampler .`${data}` .test').addClass('sampleclass');
}

question from:https://stackoverflow.com/questions/65857425/how-to-add-and-remove-class-dynamically-to-child-div-based-on-value-in-jquery

Answer 1

You could simply use Attribute Contains Prefix Selector [name|="value"] for more info please refer http://jqapi.com/#p=attribute-contains-prefix-selector.. below is the code for your example.

  $(document).ready(()=>{
    var data = "somevalue"; $('div[class|="'+data+'"]>.test').addClass("sampleclass");
    })

   .sampleclass{
      background-color:red;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div class="requestsampler">
      <div class= "somevalue">
        <div class="test">  // add new class <div class="test sample class">
         //
        </div>
        
      </div>
       <div class= "somevalue2">
         <div class="test">
          //
        </div>
        
      </div>
       <div class= "somevalue3">
         <div class="test">
          //
        </div>
        
      </div>
    </div>