jQuery Hide section with span value exceeding value of range slider

user_3087516 0
Viewed 400

How to hide all sections with the containing span values exceeding/ not exceeding the current value of the range slider?

HTML Range Slider:

<span>Price from: </span><span id="price"></span><span> $</span>
<input type="range" min="0" max="1000" value="0" id="range"/>

HTML Sections: (examples)

<div id="main">

<section>
   <div class="content">
      <p>Current trade: <span id="data">41,99</span> $ on the market</p>
   </div>
</section>

<section>
   <div class="content">
      <p>Current trade: <span id="data">362,37</span> $ on the market</p>
   </div>
</section>

<section>
   <div class="content">
      <p>Current trade: <span id="data">789,64</span> $ on the market</p>
   </div>
</section>

</div>

My attempt in jQuery so far:

Current value display in a span above the range slider: (working)

var slider = document.getElementById("range");
var rdata = document.getElementById("price");
rdata.innerHTML = slider.value;

slider.oninput = function() {
rdata.innerHTML = this.value;
}

Hide all sections with span values exceeding the current range slider value: (not working)

$(document).ready(function(){    
   var slider = document.getElementById("range");
   var rdata = slider.value;
   $("#main").find('#data').each(function () {
      return parseInt($(this).text()) < rdata;
   }).parent().parent().hide();       
)}
css html jquery javascript
3 Answers

You can find all the section within the main id element and loop over section element and hide it. section tag is not found by jQuery and you can define it as div with section class. You can find jsfiddle as well.

var slider = document.getElementById("range");
var rdata = document.getElementById("price");
rdata.innerHTML = slider.value;

slider.oninput = function() {
  $("span#price").text(slider.value);
  $("#mainDiv").find("div.content").each(function() {

  if(parseInt($(this).find("span#data").text()) < slider.value) {
    $(this).parent().hide();
  }
  else {
    $(this).parent().show();
  }
});
}

Find the jsfiddle Your fixed jsfiddle

user_68870840

You can try following:

$( document ).ready( function() {
     $( '#range' ).on( 'change', function() {
         var rdata = $( this ).val();
         $( '#main .content span' ).each( function () {
            if( parseInt( $( this ).text().replace( /\D/g, '' ) ) < rdata ) {
                $( this ).closest( 'section' ).hide();
            } else {
                $( this ).closest( 'section' ).show();
            }
         } );

     } );   
} );

Here is the updated FIDDLE.

Edit:

Another question: Is it possible that the hide function is working "on the fly" moving the range slider and not only after the mouse click/ control?

You could do that by changing the event change to input in the above code.

Here is the new FIDDLE.

user_43620010

Try this:

$(document).ready(function(){

 

     $("#price").text($("#range").val());
 $("#range").change(function(){
  var slider = $("#range").val();
      $(".data").each(function(){
        let val = $(this).text();
        if(parseInt(val) < slider)
          $(this).parents().eq(2).hide();
        else
          $(this).parents().eq(2).show();
       });
  });
 
  
});
       
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span>Price from: </span><span id="price"></span><span> $</span>
<input type="range" min="0" max="100000" value="0" id="range"/>

<div id="main">

<section>
   <div class="content">
      <p>Current trade: <span class="data">4199</span> $ on the market</p>
   </div>
</section>

<section>
   <div class="content">
      <p>Current trade: <span class="data">36237</span> $ on the market</p>
   </div>
</section>

<section>
   <div class="content">
      <p>Current trade: <span class="data">78964</span> $ on the market</p>
   </div>
</section>

</div>

user_108825350
Related