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>

REGEX EXPLANATION

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

因此，上述案例中的regex将是

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

Answer 2

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

您必须迭代元素和类，并检查每个元素是否包含数组中的任何类，如下所示

UnsupportedOperation

您可以轻松地将其变为功能

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;

FIDDLE

使用function hasClass(elements, classes) { return elements.filter(function(index, elem) { return classes.some(function(klass) { return elem.classList.contains(klass); }); }).length > 0; }和Array.some来避免不必要的迭代和类名的缓慢匹配。

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

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

6 个答案: