javascript - 扩展 jQuery 属性选择器

Question

我有一个内联弹出窗口，显示复选框列表和关联标签，每个标签都位于单独的 span 元素中。我想添加一个文本框，用户可以在其中键入以过滤弹出窗口中的值(用户名)。我有以下代码:

$("#toEmpFilter").live("change", function () {

            var FilterVal = $(this).val();
            $("input.boxes").not("[title*=" + FilterVal + "]").each(function () {
                $(this).parent("span.clscheck").hide();
            });
          $("input.boxes[title*=" + FilterVal + "]").each(function () {
                $(this).parent("span.clscheck").show();
            });

        });   

标签值被复制到标题字段中，例如 <input type="text" title="john woo"/> 。这段代码工作正常。唯一的问题是title*=FilterVal进行区分大小写的比较，而我需要不区分大小写的比较。

我做了一些研究，但只能找到扩展 :extend like 关键字，而不是 *=或$=运算符。

Answer 1

您可以将函数传递给 .not() 并标准化两端的大小写。

var FilterVal = $(this).val().toLowerCase(); // change to lower case

$("input.boxes").not(function() {
          // change title to lower case and compare
      return this.title.toLowerCase().indexOf( FilterVal ) > -1;
}).each(function () {
    $(this).parent("span.clscheck").hide();
});

<小时/>

编辑:没有注意到您没有进行精确的比较。已修复以复制属性包含比较。

您可以像这样缩短代码:

   $("#toEmpFilter").live("change", function () {
        var FilterVal = $(this).val().toLowerCase();

        $("input.boxes").each(function () {
            $(this).parent("span.clscheck")
                   .toggle( this.title.toLowerCase().indexOf( FilterVal ) > -1 );
        });
    });

这样您只需选择元素一次。