时间戳

首页 > 解决方案 > 如何过滤引导卡片组不区分大小写？

jquery - 如何过滤引导卡片组不区分大小写？

问题描述

我知道有人为此创建了一个线程，但它区分大小写。不幸的是，我对社区还很陌生，没有为该帖子添加评论的声誉。我想知道你们是否可以帮助我。

这是链接（使用 jQuery 过滤的 Bootstrap 4 卡片），我非常感谢 Themes.guide 回答基督徒的问题。

我真的坚持尝试将以下内容更改为不区分大小写。

Themes.guide 的代码可以在这里找到

我可以通过添加将搜索输入更改为全部大写：

.toUpperCase() to $(this).val().

我不知道如何将卡片标题更改为全部大写，以便搜索变得不区分大小写。

预先感谢您的帮助！

标签： jquerybootstrap-4filtering

解决方案

与其使用:contains()jquery 的函数，不如遍历每个标题并在循环回调中执行比较可能会更好。

$('#search').keyup(function (){
    $('.card').removeClass('d-none');
    var filter = $(this).val(); // get the value of the input, which we filter on

    /* Iterate over each title */
    $('.card-deck').find('.card .card-body h4').each(function(){
        var $this = $(this); //Assign alias to 'this' 
        if($this.text().toUpperCase() !== filter.toUpperCase()) 
            //If both uppercase values don't match
            $this.parent().parent().addClass('d-none');
    });
})

推荐阅读