jQuery看看div是否存在类错误

Question

如何检查我的div是否具有A和B类或具有A B和C类 我想做

if my div is <div class="form-group field-post-file">
// Do some code 
if my div is <div class="form-group field-post-file has-error">
// Don't do anything 

Answer 1

使用hasClass()方法来实现：-

if ($("#div1").hasClass("form-group field-post-file")) {
  console.log('div1');
}
if ($("#div2").hasClass("form-group field-post-file has-error")) {
 console.log('div2');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group field-post-file" id="div1">DIV 1</div>
<div class="form-group field-post-file has-error" id="div2">DIV 2</div>

备用1格：-

if ($("#div1").hasClass("form-group field-post-file has-error")) {
  console.log('div1 with form-group field-post-file has-error');
}
else if ($("#div1").hasClass("form-group field-post-file")) {
  console.log('div1 with form-group field-post-file');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group field-post-file has-error" id="div1">DIV 1</div>

Answer 2

方法hasClass应该可以满足您的需求。

$('.form-group.field-post-file').each((i, e) => {
  let $e = $(e);

  // guard to exclude elements with class 'has-error'
  if ($e.hasClass('has-error')) return;
  
  console.log($e.text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group field-post-file">div #1</div>
<div class="form-group field-post-file has-error">div #2</div>

或者，您可以只使用选择器排除类。

$('.form-group.field-post-file:not(.has-error)').each((i, e) => {
  let $e = $(e);
  
  console.log($e.text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group field-post-file">div #1</div>
<div class="form-group field-post-file has-error">div #2</div>

Answer 3

虽然您已经接受了确实可以回答您的问题的答案，但我认为值得提供一些替代方法，因为可以通过使用简单的选择器来避免使用if，既可以在jQuery中使用，也可以使用“普通” JavaScript。

虽然您指定仅要检查一个<div>元素，但我将在JavaScript中提供允许使用一个或多个元素的替代方法。

但是，在两种方法中，我们使用相同的CSS选择器：

// we first select all the <div> elements with the classes
// of 'form-group' and 'field-post-file', and then we use the
// negation pseudo-class of ':not()' to remove those elements
// that have the class of '.has-error':
div.form-group.field-post-file:not(.has-error)

首先，jQuery：

$('div.form-group.field-post-file:not(.has-error)').css('color', 'limegreen');

$('div.form-group.field-post-file:not(.has-error)').css('color', 'limegreen');

div {
  margin: 0 0 0.5em 0;
  padding: 0.5em;
  box-sizing: border-box;
  border: 1px solid #000;
  border-radius: 1em 0;
}

div::after {
  content: attr(class);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group field-post-file"></div>
<div class="form-group field-post-file has-error"></div>
<div class="form-group field-post-file"></div>

JS Fiddle demo。

在JavaScript中，以下内容将仅选择所有匹配项中的第一个：

document.querySelector('div.form-group.field-post-file:not(.has-error)')
  .style
  .color = 'limegreen';

document.querySelector('div.form-group.field-post-file:not(.has-error)')
  .style
  .color = 'limegreen';

div {
  margin: 0 0 0.5em 0;
  padding: 0.5em;
  box-sizing: border-box;
  border: 1px solid #000;
  border-radius: 1em 0;
}

div::after {
  content: attr(class);
}

<div class="form-group field-post-file"></div>
<div class="form-group field-post-file has-error"></div>
<div class="form-group field-post-file"></div>

JS Fiddle demo。

这将导致error if there is no element matching the supplied selector，因此防止该错误的一种方法是使用if：

let elem = document.querySelector('div.form-group.field-post-file:not(.has-error)');
if (elem) {
  elem.style.color = 'limegreen';
}

let elem = document.querySelector('div.form-group.field-post-file:not(.has-error)');
if (elem) {
  elem.style.color = 'limegreen';
}

div {
  margin: 0 0 0.5em 0;
  padding: 0.5em;
  box-sizing: border-box;
  border: 1px solid #000;
  border-radius: 1em 0;
}

div::after {
  content: attr(class);
}

<div class="form-group field-post-file"></div>
<div class="form-group field-post-file has-error"></div>
<div class="form-group field-post-file"></div>

JS Fiddle demo。

但是由于使用适当的选择器是为了避免首先使用if，因此此选项并不理想。但是，以下方法可以在找不到匹配项的情况下防止发生错误，并且还可以找到多个匹配项：

// here we find the same element(s) as before:
document.querySelectorAll('div.form-group.field-post-file:not(.has-error)')

  // we then take advantage of NodeList.forEach() to iterate over every
  // Node in the NodeList; because we're iterating over that NodeList
  // there is no error if no nodes are found:
  .forEach(

    // here we use Arrow function syntax to pass the current Node
    // of the NodeList ('match') to the anonymous function which
    // sets the 'color' of the current Node to 'limegreen':
    (match) => match.style.color = 'limegreen'
  )

document.querySelectorAll('div.form-group.field-post-file:not(.has-error)').forEach(
  (match) => match.style.color = 'limegreen'
);

div {
  margin: 0 0 0.5em 0;
  padding: 0.5em;
  box-sizing: border-box;
  border: 1px solid #000;
  border-radius: 1em 0;
}

div::after {
  content: attr(class);
}

<div class="form-group field-post-file"></div>
<div class="form-group field-post-file has-error"></div>
<div class="form-group field-post-file"></div>

JS Fiddle demo。

如果您或您的用户使用的浏览器未实现NodeList.forEach()，则可以将其重写如下：

// here we call Array.prototype.forEach and, with
// Function.prototype.call(), apply that method to the
// NodeList returned by document.querySelectorAll():
Array.prototype.forEach.call(
  document.querySelectorAll('div.form-group.field-post-file:not(.has-error)'),

  // a browser that doesn't support NodeList.forEach() probably doesn't
  // support Arrow functions, so here we use a regular anonymous function
  // in place of the Arrow function from earlier:
  function(match) {
    match.style.color = 'limegreen';
  });

Array.prototype.forEach.call(
  document.querySelectorAll('div.form-group.field-post-file:not(.has-error)'),
  function(match) {
    match.style.color = 'limegreen';
  });

div {
  margin: 0 0 0.5em 0;
  padding: 0.5em;
  box-sizing: border-box;
  border: 1px solid #000;
  border-radius: 1em 0;
}

div::after {
  content: attr(class);
}

<div class="form-group field-post-file"></div>
<div class="form-group field-post-file has-error"></div>
<div class="form-group field-post-file"></div>

JS Fiddle demo。

参考文献：

• CSS：
  • :not()。
• JavaScript：
  • Array.prototype.forEach()。
  • Arrow functions。
  • document.querySelector()。
  • document.querySelectorAll()。
  • Function.prototype.call()。