javascript - jQuery keyup 过滤器在内容位于列中时有效,但在 float : left; 时无效

标签 javascript jquery html css

遇到一个问题,在您输入内容后(输入“spore”然后删除它),方框不会重置为 2x4(而是上面有 6 个,下面有 2 个)。如果我将框放入 4 列,它会起作用,但如果我只是 float: left on #sortables 就不行。

这是有效的 fiddle (带列):http://jsfiddle.net/SkQPZ/1

这是不起作用的 fiddle (带 float ):http://jsfiddle.net/4pBFu/ .我希望这个 fiddle 能工作。

下面是我的 jQuery。

    (function ($) {
jQuery.expr[':'].Contains = function (a, i, m) {
    return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

function listFilter(gamefilter, list) {
    var form = $("<form>").attr({
        "class": "filterform",
            "action": "#"
    }),
        input = $("<input>").attr({
            "class": "filterinput",
            "type": "text",
            "placeholder": "Filter"

        });

    $(form).append(input).appendTo(gamefilter);
    $(input).change(function () {
        var list = $("#sortable");
        var filter = $(this).val();
        console.log(filter.length);
        if (filter.length > 0) {
            $(list).find("a:not(:Contains(" + filter + "))").parent().slideUp();
            $(".number").hide();
            $(".numberstwo").hide();

        } else {
            console.log($(".number"));
            $(".number").show();
            $(".numberstwo").show();
            $(list).find("a").parent().slideDown();
        }
        return false;
    }).keyup(function () {
        $(this).change();

    });
}
$(function () {
    listFilter($("#gamefilter"), $("#sortable"));

});
}(jQuery));

最佳答案

不知道你到底想做什么,所以我用你“坏了”的jsfiddle做了这个 这是您要找的吗?

http://jsfiddle.net/4pBFu/8/

本质上,我在 if 中添加了这个,以在删除一些文本后显示符合过滤器的元素。

$(list).find("a:Contains(" + filter + ")").parent().show();

关于javascript - jQuery keyup 过滤器在内容位于列中时有效,但在 float : left; 时无效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19307472/

相关文章:

javascript - JS 函数不适用于动态字段

html - CSS - 在悬停时影响元素的全宽,而不删除填充

javascript - 每次循环时通过 id 获取元素

javascript - Jquery 在鼠标悬停时添加类并延迟删除它

javascript - 需要有关 Javascript 中变量范围的帮助

javascript - 给定两个连接的可排序 JQuery 列表,我如何知道元素被放置在哪个容器上?

javascript - 检测 jQuery 插件是否应用于多个元素?

javascript - JQuery 不更新 :last Filter for Dynamically Added Elements

javascript - 如何生成paypal支付二维码?

javascript - 无法使用 AWS-sdk 连接到 AWS EC2