Dynamically Change CSS with Javascript or jQuery -

i have snippet of code in change css dynamically based on values being greater 0. value of '0' class = 'cart-summary__count'. value greater '0' class = 'cart-summary__count_full'.

<span class="cart-summary__count" data-v-observable="cart-count">0</span>  <span class="cart-summary__count" data-v-observable="cart-count">1</span> 

*edit:

<div id="cart-summary">   <span class="cart-summary__count" data-v-observable="cart-count">0</span>   <a href class="cart">example.com</a> </div> 

change to:

<a href class="cart-full">example.com</a> 

i still learning js , appreciated. cart value can change on page when adding item.

please use code

$(document).ready(function() {   $("span").each(function(){      if (parseint($(this).text()) > 0){        $(this).removeclass("cart-summary__count");        $(this).addclass("cart-summary__count_full");      }   }); }); 

refer fiddle

edit

based on edit, use following code.

html

<div id="cart-summary">   <div class="cartcontainer">     <span class="cart-summary__count" data-v-observable="cart-count">0</span>     <a href class="cart">example.com</a>     </div>   <div class="cartcontainer">     <span class="cart-summary__count" data-v-observable="cart-count">1</span>     <a href class="cart">example1.com</a>     </div> </div> 

js

$(document).ready(function() {   $("span").each(function(){      if (parseint($(this).text()) > 0){             $(this).parent().find('a').removeclass("cart");             $(this).parent().find('a').addclass("cart-full");      }   }); }); 

css

.cart-full  {   border : 2px solid red }  .cartcontainer {   padding-top : 5px; } 

refer new fiddle