title: jQuery function inside jQuery each not working as expected
body: <p>The following code throws an error:</p>
  
  <ul>
  <li>Uncaught TypeError: Cannot set property 'background' of undefined </li>
  </ul>
  
  
  
  <pre><code>$(document).ready(function(){
      function assignColor(value, el){
          if(value &lt; 10){
              el.style.background = "#CCC"
          } else if(value &lt; 30){
              el.style.background = "#333"
          } else if(value &lt; 100){
              el.style.background = "red"
          }
      };
  
      $('table .day_1 td').each(function() {
          console.log($(this));
          assignColor($(this).html(), $(this));
      });
  });
  </code></pre>
  
  <p>I have a table which has 8 rows like the following:</p>
  
  <pre><code>        &lt;tr class="day_1"&gt;
              &lt;td class="first"&gt;Wed 5&lt;/td&gt;
              &lt;td&gt;45&lt;/td&gt;
              &lt;td&gt;01&lt;/td&gt;
              &lt;td&gt;454&lt;/td&gt;
              &lt;td&gt;03&lt;/td&gt;
              &lt;td&gt;04&lt;/td&gt;
              &lt;td&gt;22&lt;/td&gt;
              &lt;td&gt;06&lt;/td&gt;
              &lt;td&gt;07&lt;/td&gt;
              &lt;td&gt;08&lt;/td&gt;
              &lt;td&gt;09&lt;/td&gt;
              &lt;td&gt;10&lt;/td&gt;
              &lt;td&gt;11&lt;/td&gt;
              &lt;td&gt;12&lt;/td&gt;
              &lt;td&gt;13&lt;/td&gt;
              &lt;td&gt;14&lt;/td&gt;
              &lt;td&gt;15&lt;/td&gt;
              &lt;td&gt;16&lt;/td&gt;
              &lt;td&gt;23&lt;/td&gt;
              &lt;td&gt;18&lt;/td&gt;
              &lt;td&gt;19&lt;/td&gt;
              &lt;td&gt;56&lt;/td&gt;
              &lt;td&gt;21&lt;/td&gt;
              &lt;td&gt;22&lt;/td&gt;
              &lt;td&gt;23&lt;/td&gt;
              &lt;td&gt;2564&lt;/td&gt;
          &lt;/tr&gt;
  </code></pre>
  
  <p>and based on the value that it's inside each td I want to assign a different bg color but I have the error specified above</p>