根据数字数量条目过滤 div答案

【问题标题】：Filter divs depending on numeric quantity entry根据数字数量条目过滤 div
【发布时间】：2011-09-29 14:31:55
【问题描述】：

我正在尝试使用 jQuery 设置过滤器。我会有一定数量的divs，每个都有一个数值（比如说价格）。

我想要一个文本框和按钮来过滤掉任何高于给定值的divs。因此，例如，如果我输入10 并点击过滤器，所有数值为 10 或以上的 div 都将被隐藏。

我只能找到通过按钮like this 执行的过滤器脚本，但没有一个使用数值。

非常感谢任何帮助。请记住，我的 JavaScript 技能有限！

【问题讨论】：

标签： javascript jquery filter

【解决方案1】：

可能是这样的，遍历每个div 具有class 的prices 获取值，将其解析为int，将其与textbox 与myTextBox 的id 进行比较

$('div.prices').each(function() {
    var value = parseInt($(this).text());
    if (value >= parseInt($('#myTextBox').val()))
       $(this).hide();
    else 
       $(this).show();
})

jsFiddle

【讨论】：

是否有这个，所以它包括你输入的值？例如，如果我在您的示例中输入 12，我会得到 12 以下的所有内容，而不是 12 本身。另外，我不希望该值实际上对 div 中的用户可见，而只是代码中的值（如果可能）？
是的，只需将if 语句更改为if (value > parseInt($('#myTextBox').val())) .. 我也删除了大于等于并使其大于
太棒了。那么隐藏价值的东西呢？我不希望该值实际上对 div 中的用户可见，而只是代码中的值（如果可能）？
只需将textbox 更改为hidden 元素即可。 <input type="hidden" id="myHiddenField"/>
我看到您已经将其他答案标记为解决方案，也许您应该重新考虑。

【解决方案2】：

事情是这样的：

http://jsfiddle.net/SMPAq/1/

更新：

好的，这就是全部内容：

<script>
function sortmebaby()
{
    var divList = $('#containerMonkey div[id^="monkey_"]');  

$.each(divList, function(index, value)
{
    console.log($(value).attr('xprice'));
    if ( $(value).attr('xprice') > $('#mankipower').val())
        $(value).hide();
    else
        $(value).show();
    //alert(index + ': ' + value);
});

}
</script>

<div id="containerMonkey">
    <div id="monkey_1" xprice="1">1</div>
    <div id="monkey_2" xprice="2">2</div>
    <div id="monkey_3" xprice="3">3</div>
    <div id="monkey_4" xprice="4">4</div>
    <div id="monkey_5" xprice="5">5</div>
</div>
<input type="text" name="mankipower" id="mankipower">
<input type="button" value="PUSH" onclick="sortmebaby()">

【讨论】：

请在此处发布您的答案以及提供小提琴。如果链接因任何原因过期，您的回答将变得毫无用处。
有什么办法让结果淡入淡出？ :)
将 hide() 和 show() 分别替换为 fadeOut() 和 fadeIn()。 jsfiddle.net/SMPAq/2
糟糕，似乎有一个错误...我已将 xprice="1" 值更改为 10、20、30、40 和 50，过滤器似乎显示了一些不稳定的结果?
@GrahamMcDonnell，如果您注意到差异，我的回答适用于所有情况。