CODEWITHSUNDEEP
javascriptjquery
Simon Staton
Simon Staton

Reputation: 4505

Check if number is between 2 values

I am currently building a filter based on div class's and contents.

I was wondering if it is possible to pass a string like follows into a function: "£0.01 - £100.01"

and then have the function show all div's where the html of that div is between this range

so say I have a div with a class of "price" and its contents were: £10.30

from running this function and passing the string of "£0.01 - £100.01" into it it would hide all div's similar to how I have done it in the js below then only show the div's where the div class "price"'s contents were within the selected price range.

I have managed to do something similar with a brand filter which I will provide here:

function brand(string){
    var brand = string;
    $('.section-link').hide();
    $('.section-link').children('.brand.' + brand).parent().show();
    if (brand == "All Brands"){
        $('.section-link').show();
    }
}

Any general advice or code is greatly appreciated to help achieve this :)

Thanks, Simon

Edit:

Target div example:

<div class="section-link">
<div class="price"> £56.99</div>
</div>

Reply's are helping a lot, the filter function looks awesome so thanks for pointing that out.

I am just trying to find a way to split the initial string being past in, into two values one low and one high as well as stripping the £ signs

Edit:

managed to split the original string:

var range = string.replace(/\u00A3/g, '');
var rangearray = range.split("-");
alert(rangearray[0]);
alert(rangearray[1]);

FINAL EDIT:

From the reply's I have kind of been able to make a function, however it is not entirely working :) can anyone spot what I have done wrong?

function price(string){
    $('.section-link').hide();
    var range = string.replace(/\u00A3/g, '');
    var rangearray = range.split("-");
    low = rangearray[0];
    high = rangearray[1];

     $('.section-link').children('.price').each(function() {
        var divprice = $(this).text().replace(/\u00A3/g, '');
        if (low <= divprice && high >= divprice){
             $(this).parent().show();
        }
    })
}

Okay its working, I had spaces in my string. The final function (although messy :P) is:

function price(string){
    $('.section-link').hide();
    var range = string.replace(/\u00A3/g, '');
    var rangearray = range.split("-");
    low = rangearray[0].toString();
    high = rangearray[1].toString();
    lowmain = low.replace(/ /g,'');
    highmain = high.replace(/ /g,'');

     $('.section-link').children('.price').each(
        function() {
            var divprice = $(this).text().replace(/\u00A3/g, '');
            var maindivprice = divprice.replace(/ /g,'');

            if (lowmain <= maindivprice && highmain >= divprice){
                $(this).parent().show();
        }
    })
}

Upvotes: 0

Views: 3073

Answers (4)

AntouanK
AntouanK

Reputation: 4968

Use jQuery's filter()

An example -> http://jsfiddle.net/H6mtY/1/

var minValue = 0.01,
    maxValue = 100.01;

var filterFn = function(i){
    var $this = $(this);

    if($this.hasClass('amount')){

        //    assume that text is always a symbol with a number
        var value = +$this.text().match(/\d+.?\d*/)[0];

        if(value > minValue && value < maxValue){
            return true;
        }
    }
    return false;
};

//    apply your filter to body for example
$('#target span')
.filter(filterFn)
.each(function(i,ele){

    // do something with the selected ones
    $(this).css('color','red');
});

Upvotes: 1

Zach Saucier
Zach Saucier

Reputation: 25954

I'd use a function like this one, where range is the string you gave

function highlightDivs(range) {
     var lower = range.split(" ")[0].slice(1);
     var upper = range.split(" ")[2].slice(1);

     $('.section-link').hide();
     $('.section-link').children('.price').each(function() {            
        if (lower <= $(this).val() && upper >= $(this).val()){
             $(this).parent().show();
         }
    });
}

Upvotes: 2

Naor Biton
Naor Biton

Reputation: 952

You can use jQuery's build in filter() function, and write a filter with the condition you described.

First, you should hide all the items with any price.

$(".price").parent().hide();

Then, you can filter all the items with in-range prices and show them:

$(".price").filter(function(){
    var $this = $(this);
    var value = $this.val();
    return (value >= minNumber && value <= maxNumber); // returns boolean - true will keep this item in the filtered collection

}).parent().show();

Upvotes: 1

fditz
fditz

Reputation: 882

I would go by something like:

  1. Get all the divs that have prices.
  2. Iterate through all:
    1. Transform the strings (minus the pound symbol) to float numbers and compare with an IF statement if they are inside the provided range.
    2. If they are just go to the next (use continue maybe)
    3. Else (not in the range) add a class like .hide so it can be blended through css (or just use the blend function from jquery)

Upvotes: 0

Related Questions