检查元素包含任何来自阵列

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如下：

Demo

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>

正则表达式的说明

1. \b：将匹配单词边界
2. |：在正则表达式
3. arr.join('|')作品OR：愿意加入使用|加入
4. ()阵列中的所有元素：捕获组。在这种情况下用于匹配之类的一个

所以，regex在上述情况下将

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

Answer 2

如何检查是否有这些元素有一个类的 阵列

你不得不遍历元素和类，并检查是否每一个元素包含任何的类数组中，这样的事情

var elements = $('div'); 
var obj  = ['nine', 'ten', 'eleven']; 

var hasClass = elements.filter(function(index, elem) { 
    return obj.some(function(klass) { 
     return elem.classList.contains(klass); 
    }); 
}).length > 0; 

你可以很容易地变成一只功能

function hasClass(elements, classes) { 
    return elements.filter(function(index, elem) { 
     return classes.some(function(klass) { 
      return elem.classList.contains(klass); 
     }); 
    }).length > 0; 
} 

FIDDLE

使用Array.some和Element.classList.contains避免uneccessary迭代和类名的慢匹配。

Answer 3

function checkClasses() { 
    var tagsWithClasses = []; 
    $.each($("div"), function(index, value){ 
     for (i=0; i<obj.length; i++) { 
       if ($(value).hasClass(obj[i])) { 
        tagsWithClasses.push($(value)); 
        continue; 
       } 
     } 
    }); 

    return tagsWithClasses; 
} 

Answer 4

$('div').each(function() { 
    var found = false; 
    var element_classes = $(this)[0].className.split(/\s+/); 

    // Loop each class the element has 
    for (var i = 0; i < element_classes.length; i++) { 
     // Check if each class from the element is within the array of classes we want to match 
     if (['nine', 'ten', 'eleven'].indexOf(element_classes[i]) !== -1) { 
      // We found a match, break out of the loop 
      found = true; 
      break; 
     } 
    } 

    // check if found or not 
    if (found) { 
     // Was found 
    } 
    else { 
     // Was not found 
    } 

}); 

Answer 5

var obj = ['nine', 'ten', 'eleven']; 
var divs =[]; 
$.each(obj,function(key,value){ 

    var values = value; 
    $(div).each(function(){ 
    var divId = $(this).attr('id'); // Giving some separate id for the div to track it 
    var getClass = $(this).attr('class'); 

    if(getClass.indexOf(values) >= 0) { 
    div.push("divId"); 
    } 
}); 
}); 

你可以通过元素循环和结果

Answer 6

问题取决于你正在尝试做的。

如果你想创建这些元素的集合，你可以创建数组中的一个选择：

var elemCollection = $( '.' + obj.join(',.')).doSomething(); 

也可以在filter()

$existingElementCollection.filter( '.' + obj.join(',.')).doSomething(); 

使用，也可以在is()使用

var filterSelector = '.' + obj.join(',.'); 
$someCollection.each(function(){ 
    if($(this).is(filterSelector){ 
    // do somthing for matches 
    } 
}); 

DEMO