jquery - Change Class Dynamically with Javascript after Value has loaded -

i have code here have been working make css class change dynamically. when load page code keeps class 'cart' whenever span'cart count' greater 0. not sure if not loading correctly.

http://store.revivesalonsf.com

here jsfiddle example have been working same thing. thoughts on how make work? guidance appreciated surly learning js.

http://jsfiddle.net/xs9e6mol/65/

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <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>

if want change classes when count of items increases in span element have change addtocart script of js , event there. there quick alternate way want adding interval checks values every second , update classes based on it. not suggest use second approach if know how manage add cart script! try , work. example:

window.setinterval(function(){   if (parseint($("span.cart-summary__count").text()) > 0) {     $("span.cart-summary__count").parent().find('a').removeclass("cart").addclass("cart-full");   } },1000);