title: jQuery Hide section with span value exceeding value of range slider
body: <p>How to hide all sections with the containing span values exceeding/ not exceeding the current value of the range slider?</p>
  
  <p><strong>HTML Range Slider:</strong></p>
  
  <pre><code>&lt;span&gt;Price from: &lt;/span&gt;&lt;span id="price"&gt;&lt;/span&gt;&lt;span&gt; $&lt;/span&gt;
  &lt;input type="range" min="0" max="1000" value="0" id="range"/&gt;
  </code></pre>
  
  <p><strong>HTML Sections:</strong> (examples)</p>
  
  <pre><code>&lt;div id="main"&gt;
  
  &lt;section&gt;
     &lt;div class="content"&gt;
        &lt;p&gt;Current trade: &lt;span id="data"&gt;41,99&lt;/span&gt; $ on the market&lt;/p&gt;
     &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section&gt;
     &lt;div class="content"&gt;
        &lt;p&gt;Current trade: &lt;span id="data"&gt;362,37&lt;/span&gt; $ on the market&lt;/p&gt;
     &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;section&gt;
     &lt;div class="content"&gt;
        &lt;p&gt;Current trade: &lt;span id="data"&gt;789,64&lt;/span&gt; $ on the market&lt;/p&gt;
     &lt;/div&gt;
  &lt;/section&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>My attempt in jQuery so far:</strong></p>
  
  <p>Current value display in a span above the range slider: (working)</p>
  
  <pre><code>var slider = document.getElementById("range");
  var rdata = document.getElementById("price");
  rdata.innerHTML = slider.value;
  
  slider.oninput = function() {
  rdata.innerHTML = this.value;
  }
  </code></pre>
  
  <p>Hide all sections with span values exceeding the current range slider value: (not working)</p>
  
  <pre><code>$(document).ready(function(){    
     var slider = document.getElementById("range");
     var rdata = slider.value;
     $("#main").find('#data').each(function () {
        return parseInt($(this).text()) &lt; rdata;
     }).parent().parent().hide();       
  )}
  </code></pre>