檢查元素包含任何來自陣列

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