Question

说我有一个div，有一些CSS和javascript：

var someCSS = {
  color: 'red',
};
         

$(".test > .sub").filter(function(index) {
   return $(this).text() == 'hello';
 }).css(someCSS);

.test {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test'>
  <div class='sub'>hello</div>
  <div class='sub'>stackoverflow</div>
</div>

以上将为'hello'红色着色，但我不明白如何添加更多值，例如'hello'和'stackoverflow'。我显然不能做return $(this).text() == 'hello' || 'stackoverflow';，但我无法弄明白该做什么！

任何建议将不胜感激：）

Answer 1

使用值数组然后检查它，这样，您可以根据需要添加更多值，然后您可以使用Array.prototype.indexOf。

var arr = ['hello', 'stackoverflow'];

然后

return arr.indexOf($(this).text()) > -1;

Answer 2

$(".test > .sub").filter(function(index) {
   return $(this).text() == 'hello' || $(this).text() === 'stackoverflow';
 }).css(someCSS);

或

var values = [
  'hello',
  'stackoverflow'
]

$(".test > .sub").filter(function(index) {
   return values.indexOf($(this).text()) > -1 
 }).css(someCSS);

Answer 3

关闭，您需要再次进行比较：

return $(this).text() == 'hello' || $(this).text() == 'stackoverflow'

Answer 4

我对此问题的看法是使用Array.prototype.indexOf()：

$(".test > .sub").filter(function(index) {
   return ['hello','stackoverflow'].indexOf($(this).text().trim()) > -1;
 }).addClass('someCSS');

上述方法允许使用您希望使用的字符串数组，而不是显式地比较和评估匿名函数中的多个字符串;尽管如此，在这个例子中，为了简洁起见，我在同一个函数中构造了该数组。

$(".test > .sub").filter(function(index) {
  return ['hello','stackoverflow'].indexOf($(this).text().trim()) > -1;
}).addClass('someCSS');

.someCSS {
  color: #f00;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='test'>
  <div class='sub'>hello</div>
  <div class='sub'>stackoverflow</div>
</div>

参考文献：

JavaScript的：
- Array.prototype.indexOf()。
- String.prototype.trim()。

如何使用.filter返回多个值？

4 个答案: