How to use jQuery to compare each array number? and if less than input range number div tag will hid-CodePudding

I have a question about Array in jQuery.

Below are my codes.

I have same class div tags, but different value in span tags.

I use input range bar to change value, if span tags value less then range bar value.

The correspondent div tags will be disappeared.

I could get same class array numbers, but can't compare.

How do I modify my code?

$('#myRange').change(function() {
  let Price1 = parseInt($('#myRange').val());

  let Price2 = [];

  $('.price').each(function(index, el) {
    Price2[index] = parseInt(el.innerHTML);
  });

  if (Price2 > Price1) {
    $('.col').fadeOut();
    //console.log('yes');
  } else {
    $('.col').fadeIn();
    //console.log('no');
  }


});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" min="1" max="50" value="10" step="1" class="slider" id="myRange">


<div class="col">
  <span class="price">10</span>
</div>

<div class="col">
  <span class="price">20</span>
</div>

<div class="col">
  <span class="price">30</span>
</div>

<div class="col">
  <span class="price">40</span>
</div>

<div class="col">
  <span class="price">50</span>
</div>

CodePudding user response：

You need to compare the value the user selected to the price value of every item (.col).

Here's a modified version of your example (specifically the JS code), with an added bonus of checking before the user does anything (and some code comments).

  // check columns visibility on load
  checkPriceRange(parseInt($('#myRange').val()));

  // event listener for the range slider
  $('#myRange').change(function() {
    // get the user value
    let priceRange = parseInt($('#myRange').val());

    // call the comparison function, and update the UI accordingly
    checkPriceRange(priceRange);
  });

  function checkPriceRange(priceRange) {
    // iterate through every price item
    $('.price').each(function(index, el) {
      // get the parent of the price item, as that's what will be hidden
      let $column = $(this).closest('.col');
      // get the price of the price item
      let price = parseInt(el.innerHTML);
      // compare the price with what the user selected
      if (priceRange >= price) {
        $column.fadeIn();
      } else {
        $column.fadeOut();
      }
    });
  }

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <input type="range" min="1" max="50" value="10" step="1" class="slider" id="myRange">


  <div class="col">
    <span class="price">10</span>
  </div>

  <div class="col">
    <span class="price">20</span>
  </div>

  <div class="col">
    <span class="price">30</span>
  </div>

  <div class="col">
    <span class="price">40</span>
  </div>

  <div class="col">
    <span class="price">50</span>
  </div>

CodePudding user response：

I am aware that this answer doesn't address your question regarding array comparison with jQuery, but in this case there is no reason to complicate things with an array. And since you're using .each() you can take advantage of $(this).

...the callback is fired in the context of the current DOM element, so the keyword this refers to the element. jQuery Docs

Here is a simplified working version:

$('#myRange').change(function() {
  let Price = parseInt($('#myRange').val());
  $('.price').each(function(index, el) {
    if (parseInt(el.innerText) > Price) {
      $(this).parent().fadeOut();
    } else {
      $(this).parent().fadeIn();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" min="1" max="50" value="10" step="1" class="slider" id="myRange">


<div class="col">
  <span class="price">10</span>
</div>

<div class="col">
  <span class="price">20</span>
</div>

<div class="col">
  <span class="price">30</span>
</div>

<div class="col">
  <span class="price">40</span>
</div>

<div class="col">
  <span class="price">50</span>
</div>