Javascript 如何在将所有内容转换为小写后检查元素是否包含字符串

我使用一个简单的输入字段来搜索我网站上的列表，使用以下代码：

$('#f-search').keyup(function() {
    var q = $('#f-search').val().toLowerCase();
    $("#f-list .f // toLowerCase // :contains('q')").css('border-color', '#900');
});

我的问题是列表元素（

.f

）包含不可预测的大写字母，因此为了准确地对照输入检查，我需要将其转换为小写，但我不知道如何做到这一点，然后使用

：contains

。例如，如果一个

.f

包含“wowowzziees”，但用户键入了“wow”，则它与我的当前代码不匹配，但我希望它与我的当前代码匹配。

您想要的是：

$("#f-list .f").filter(function() {
  return $(this)
         .text() // or .html() or .val(), depends on the element type
         .toLowerCase()
         .indexOf(q) != -1;
}).css('border-color', '#900');

它比较由

“#f-list.f”

选择的元素中的文本，如果它们包含

q

变量中的内容，则会应用css修改

编辑：

如果还希望每次重置列表，可以执行以下操作：

$("#f-list .f").css('border-color', 'WHATEVER IT WAS').filter(function() {
  return $(this)
         .text() // or .html() or .val(), depends on the element type
         .toLowerCase()
         .indexOf(q) != -1;
}).css('border-color', '#900');

为了获得更好的性能，您可以如下方式缓存列表：

var f_list = $("#f-list .f"),
    f_search = $('#f-search');

f_search.keyup(function() {
    var q = f_search.val().toLowerCase();
    f_list.css('border-color', 'WHATEVER IT WAS').filter(function() {
      return $(this)
             .text() // or .html() or .val(), depends on the element type
             .toLowerCase()
             .indexOf(q) != -1;
    }).css('border-color', '#900');
});

你想要的是：

$("#f-list .f").filter(function() {
  return $(this)
         .text() // or .html() or .val(), depends on the element type
         .toLowerCase()
         .indexOf(q) != -1;
}).css('border-color', '#900');

它比较由

“#f-list.f”

选择的元素中的文本，如果它们包含

q

变量中的内容，则会应用css修改

编辑：

如果还希望每次重置列表，可以执行以下操作：

$("#f-list .f").css('border-color', 'WHATEVER IT WAS').filter(function() {
  return $(this)
         .text() // or .html() or .val(), depends on the element type
         .toLowerCase()
         .indexOf(q) != -1;
}).css('border-color', '#900');

为了获得更好的性能，您可以如下方式缓存列表：

var f_list = $("#f-list .f"),
    f_search = $('#f-search');

f_search.keyup(function() {
    var q = f_search.val().toLowerCase();
    f_list.css('border-color', 'WHATEVER IT WAS').filter(function() {
      return $(this)
             .text() // or .html() or .val(), depends on the element type
             .toLowerCase()
             .indexOf(q) != -1;
    }).css('border-color', '#900');
});

---

您可以在jQuery中创建自己的自定义

：contains

选择器：

来自和：

并像这样使用它（请注意，新的选择器是

：包含带大写C的
）：

您可以在jQuery中创建自己的自定义
：contains
选择器：

来自和：

并像这样使用它（请注意，新的选择器是
：包含带大写C的
）：

使用绝对完美！谢谢，绝对完美！非常感谢。