Question

如何过滤div标签而不区分大小写？

我正在使用以下代码。

以下代码正常工作但过滤器区分大小写！我需要过滤而不区分大小写。我该怎么做？我不知道

   $('#txtSearchInShip').keyup(function () {
        var searchText = $(this).val();
         if (searchText.length <= 0) {
             $('div .thumbnail').fadeIn("slow");
        }
        else if (searchText.length > 0) {
             $("div .thumbnail .caption p a:contains(" + searchText + ")").parent().parent().parent().parent().show();
             $("div .thumbnail .caption p a:not(:contains(" + searchText + "))").parent().parent().parent().parent().hide();
        }
    });

Answer 1

您可以在JS文件中编写此代码（对于jQuery＆gt; = 1.8）：

$.expr[":"].contains = $.expr.createPseudo(function(arg) {
    return function( elem ) {
        return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
    };
});

然后，像往常一样调用您的方法：

$("div:contains('John')")

来自CSS-tricks的信息（感谢karthikr获取此链接）。

Answer 2

好吧，contains区分大小写...有两种方法可以在不区分大小写的情况下制作..单向是覆盖函数而另一种是创建新函数..

覆盖jquery：contains。（在代码之前添加此内容）。

jQuery.expr[':'].contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

并在脚本

中使用它

$("div .thumbnail .caption p a:contains(" + searchText + ")").parent().parent().parent().parent().show();

然而，

这会覆盖jquery contains。

使用extend

创建新的

$.extend($.expr[":"], {
 "containsIN": function(elem, i, match, array) {
      return (elem.textContent || elem.innerText || "").toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
 }
});

现在您可以使用containsIN代替contains:，您需要使用不区分大小写的方式过滤字符串

 $("div .thumbnail .caption p a:containsIN(" + searchText + ")").parent().parent().parent().parent().show();

link阅读有关jquery的更多信息，包含不区分大小写...

此外，我建议您多次使用closest()或parents()而非parent() ......

过滤div标签，不区分大小写

2 个答案: