检查元素是否包含数组中的任何类

Question

我有以下几个要素:

<div class="one two three four five six seven eight"></div>
<div class="one two three four five six seven eight ten"></div>
<div class="one two three four five six seven eight"></div>
<div class="one two three four five six seven eight"></div>
<div class="one two three four five six seven eight eleven"></div> 
<div class="one two three four five six seven eight nine"></div>

以下JS:

var obj = ['nine', 'ten', 'eleven'];

如何检查这些元素中的任何一个是否具有数组中的某个类？

Answer 1

不需要遍历每个元素和每个类来检查它是否存在于元素上.

您可以使用regex如下:

演示

var arr = ['nine', 'ten', 'eleven'];
var classes = '\\b(' + arr.join('|') + ')\\b',
  regex = new RegExp(classes, 'i');


$('div').each(function() {
  var elClasses = ' ' + $(this).attr('class').replace(/\s+/, ' ') + ' ';
  if (regex.test(elClasses)) {
    $(this).addClass('valid');
  }
})

div {
  color: red;
}
.valid {
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="one two three four five six seven eight">Invalid</div>
<div class="one two three four five six seven eight ten">Valid Ten</div>
<div class="one two three four five six seven eight">Invalid</div>
<div class="one two three four five six seven eight">Invalid</div>
<div class="one two three four five six seven eight eleven">Valid 11</div>
<div class="one two three four five six seven eight nine">Valid 9</div>

REGEX EXPLANATION

1. \b:将匹配单词边界
2. |:在正则表达式中用作OR
3. arr.join('|'):将使用|连接加入数组的所有元素
4. ():捕获组.在这种情况下用于匹配其中一个类

所以,regex在上面的情况下将是

/\b(nine|ten|eleven)\b/