jQuery .filter（）对具有单个元素的集合的行为不同

Question

我发现过滤器功能的一些非常奇怪的行为，我无法解决。

我有一个表行列表，在自定义数据过滤器属性中包含某些文本。用户在文本框中键入文本，页面会根据数据过滤器属性中的内容自动使用jQuery过滤表行：

$('tbody > tr').hide();

var validTextElements = findMatchingTextRows($('tbody > tr'));
validTextElements.show();

function findMatchingTextRows(elements) {

    var textFilterInput = $('#tb_text_filter').val();
    textFilterInput = textFilterInput.toLowerCase();

    return elements.filter('tr[data-filter*=\'' + textFilterInput + '\']');
}

除非我有一个包含一行的表，否则一切正常。在这种情况下，即使用户输入一个空字符串（在这种情况下我希望没有过滤并且列表保持不变），elements.filter('tr[data-filter*=\'' + textFilterInput + '\']')返回一个空列表，但当{{1}中有多个项目时用户输入一个空字符串，列表保持不变。

单个元素和多个元素之间似乎没有区别，如果我使用多个元素，那么我会从Chrome开发人员工具中删除除HTML之外的所有元素，它会停止工作。

为什么会发生这种情况？

Answer 1

我怀疑一些混淆是由于你对“属性包含”的行为的解释所引起的。选择。如果提供的值是空字符串，则不匹配。

https://drafts.csswg.org/selectors-3/#attribute-selectors

相关部分定义了选择器：

  

表示具有att属性的元素，其值至少包含＆gt;子串的一个实例＆＃34; val＆＃34;。如果＆＃34; val＆＃34;是空字符串然后＆gt;选择器不代表任何东西。

JQuery的过滤器功能会将匹配的元素过滤到与选择器匹配的元素：

  

将匹配元素集合减少到与选择器匹配的元素或通过函数测试

在您的情况下，这不是它们，因此filter函数返回一个空的jQuery对象。空字符串应该过滤掉所有行，而不是保留未过滤的行，因为您指示了您的期望。

很难准确地推测原始代码中发生的事情，但我怀疑某些事情会引发错误，当字符串为空时，过滤根本不会发生。如果您能够复制确切的问题，请更新您的小提琴，我会看看我是否可以提供更多帮助。