title: Different Background Color of div by Selecting nth:child of span using jquery
body: <p>I am trying to change the BackGround color of div or span using jQuery. I want to highlight the values of the second span with div having same class name. Where value be like 75,40,54 with different color, but it highlights all div with green.</p>
  <pre><code>&lt;div class=&quot;containerbox&quot;&gt;
      &lt;div id=&quot;centerbox1&quot; style= &quot;min-width:25%; max-height: 90px&quot;&gt;
        &lt;p&gt;&lt;div class=&quot;value ok&quot; data-color=&quot;25&quot;&gt;
          &lt;span style=&quot;color: #fff ;font-weight:bold; font-size:36px&quot;&gt;kk&lt;/span&gt;
        &lt;span style=&quot;color: #fff ;font-weight:bold; font-size:36px&quot;&gt;75&lt;/span&gt;
        &lt;br&gt;
       
        &lt;/div&gt;&lt;/p&gt;
    &lt;/div&gt;
  
        &lt;div id=&quot;centerbox1&quot; style= &quot;min-width:25%; max-height: 90px&quot;&gt;
       &lt;p&gt; &lt;div class=&quot;value ok&quot; data-color=&quot;100&quot;&gt;
          &lt;span  style=&quot;color: #fff ;font-weight:bold; font-size:36px&quot;&gt;rr&lt;/span&gt;
        &lt;span  style=&quot;color: #fff ;font-weight:bold; font-size:36px&quot;&gt;40&lt;/span&gt;
        &lt;br&gt;
       
        &lt;/div&gt;&lt;/p&gt;
    &lt;/div&gt;
  
  
        &lt;div id=&quot;centerbox1&quot; style= &quot;min-width:25%; max-height: 90px&quot;&gt;
        &lt;p&gt;&lt;div class=&quot;value ok&quot; data-color=&quot;25&quot;&gt;
          &lt;span  style=&quot;color: #fff ;font-weight:bold; font-size:36px&quot;&gt;ee&lt;/span&gt;
        &lt;span  style=&quot;color: #fff ;font-weight:bold; font-size:36px&quot;&gt;54&lt;/span&gt;
        &lt;br&gt;
       
        &lt;/div&gt;&lt;/p&gt;
          &lt;/div&gt;
   
      &lt;/div&gt;
  </code></pre>
  <p>My javascript below with nth selector:</p>
  <pre><code>    $('.value.ok').each(function() {
       var val = parseInt( $('.value span:nth-child(even)').text()),
        //alert(val);
          dd = parseInt( $('.value span:nth-child(2)').text());
          alert(dd);
      var d = 50;
      var e = 65;
      if (val &lt; d) {
      $(this).css('background-color', 'red');
      }
       if (val &gt; d &amp;&amp; val &lt; e) {
      $(this).css('background-color', 'yellow');
       }
  
       if (val &gt; e &amp;&amp; val &lt;= dd) {
      $(this).css('background-color', 'green');
      }
      });
  </code></pre>
  <p>If i remove one span from each div it works well but not with having extra span.</p>
  <p>My javascript below without nth selector</p>
  <pre><code>$('.value.ok').each(function() {
  var val = parseInt( $(this).text()),
  //alert(val);
      dd = parseInt( $('.value.ok').text());
      //alert(dd);
      var d = 50;
      var e = 65;
  if (val &lt; d) {
      $(this).css('background-color', 'red');
  }
  if (val &gt; d &amp;&amp; val &lt; e) {
      $(this).css('background-color', 'yellow');
  }
  
  if (val &gt; e &amp;&amp; val &lt;= dd) {
      $(this).css('background-color', 'green');
  }
  });
  </code></pre>
  <p><a href="https://i.stack.imgur.com/yre6Y.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yre6Y.png" alt="enter image description here" /></a></p>