Question

我目前正在根据div类和内容构建过滤器。

我想知道是否可以将如下字符串传递给函数： “£0.01 - £100.01”

然后让函数显示所有div，其中该div的html在此范围之间

所以说我有一个“价格”类的div，其内容是：£10.30

从运行此函数并将“£0.01 - £100.01”字符串传入其中它将隐藏所有div类似于我在下面的js中完成它的方式然后只显示div的div类“price”' s内容在选定的价格范围内。

我已经设法做了类似的品牌过滤器，我将在这里提供：

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

非常感谢任何一般建议或代码，以帮助实现这一目标：）

谢谢，西蒙

编辑：

目标div示例：

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

回复很有帮助，过滤功能看起来很棒，所以感谢你指出这一点。

我只是想找到一种方法将最初的字符串分成两个值，一个是低一个，一个是高，以及剥离£符号

编辑：

设法拆分原始字符串：

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

最终编辑：

从回复中我已经能够制作一个功能，但它并不完全正常工作:)有人能发现我做错了什么吗？

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();
        }
    })
}

好的，它在我的字符串中有空格。最终的功能（虽然凌乱：P）是：

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();
        }
    })
}

Answer 1

我会使用像这样的函数，其中range是你给出的字符串

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();
         }
    });
}

Answer 2

您可以在filter（）函数中使用jQuery的内部版本，并使用您描述的条件编写过滤器。

首先，你应该以任何价格隐藏所有物品。

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

然后，您可以使用范围内价格过滤所有项目并显示它们：

$(".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();

Answer 3

使用jQuery的过滤器（）

一个例子 - ＆gt; 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');
});

Answer 4

我会选择类似的东西：

获取所有有价格的div。
遍历所有：
1. 将字符串（减去英镑符号）转换为浮点数，如果它们在提供的范围内，则与IF语句进行比较。
2. 如果他们只是去下一个（可能继续使用）
3. 否则（不在范围内）添加类似 .hide 的类，以便可以通过css混合（或者只使用jquery中的blend函数）

检查数字是否介于2个值之间

4 个答案: