jQuery addClass example

Change class name on click in jQuery

by rmcardoso

HTML

<div class="sn-stream-textarea-container">
  <span class="sn-stream-input-decorator">This is the span color</span> 
  <div >Text text text text text</div>
</div>

<!-- 
<div class="sn-stream-textarea-container">
<span class="sn-stream-input-decorator" style="background-color: #badaff"></span>
<textarea id="activity-stream-comments-textarea" class="sn-string-textarea form-control ng-pristine ng-untouched ng-valid ng-isolate-scope ng-empty ng-valid-required" placeholder="Customer facing notes (Customer visible)" data-stream-text-input="comments" ng-required="activity_field_0.mandatory &amp;&amp; !activity_field_0.filled" ng-model="activity_field_0.value" ng-attr-placeholder="{{activity_field_0.label}}" sn-sync-with="activity_field_0.name" sn-sync-with-value-in-fn="reduceMentions(text)" sn-sync-with-value-out-fn="expandMentions(text)" mentio="" mentio-id="'activity-stream-comments-textarea'" mentio-typed-term="typedTerm" mentio-require-leading-space="true" mentio-trigger-char="'@'" mentio-items="members" mentio-search="searchMembersAsync(term)" mentio-template-url="/at-mentions.tpl" mentio-select="selectAtMention(item)" mentio-suppress-trailing-space="true" sn-resize-height="" autocomplete="off" style="overflow: hidden; overflow-wrap: break-word; height: 64px;" aria-invalid="false">
</textarea>
</div>
-->

CSS

.sn-stream-input-decorator {
  background-color: #badaff;
}

JavaScript

$('.sn-stream-textarea-container > span').each(function(){
  	$(this).parent(".sn-stream-textarea-container").css('background-color', 'green');
});