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>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>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>