检查所有元素中的特定类答案

【问题标题】：checking particular class in all elements检查所有元素中的特定类
【发布时间】：2018-12-02 02:01:20
【问题描述】：

当所有 li 元素都具有“有效”类时，我想 console.log() 一条消息。目前它通过 keyUp 函数连接到我的输入。我下面的 jQuery 代码不起作用。谢谢

HTML：

<input class="confirmPwInput" type="password" name="confirm_password">
<input class="newPwInput" type="password" name="new_password">

<ul id="#pswd_info">
  <li id="letter" class="invalid">At least
    <strong>one letter</strong>
  </li>
  <li id="capital" class="invalid">At least
    <strong>one capital letter</strong>
  </li>
  <li id="number" class="invalid">At least
    <strong>one number</strong>
  </li>
  <li id="length" class="invalid">Be at least
    <strong>10 characters</strong>
  </li>
  <li id="match" class="invalid">
    <strong>Passwords must match</strong>
  </li>
</ul>

Javascript：

$('.newPwInput,.confirmPwInput').keyup(function () {
  $('#pswd_info li').each(function(){
    if($(this).hasClass('valid')){ 
      $(this).addClass('valid')
    }
  });
});

【问题讨论】：

你的代码逻辑说“如果这有类valid，那么添加类valid”...
我在您的标记中没有看到 #pswd_info。它是否在未显示的祖先元素上？
对不起，我忘了。已编辑
@TylerRoper 在现场。冗余逻辑。而不是添加类，而是控制台日志$(this)。
谢谢 Tyler，我怎样才能检查所有这些都具有“有效”类？

标签： javascript jquery

【解决方案1】：

在您的标记中搜索没有 .valid 类集的 li 标签。如果没有，则所有lis 都被认为是有效的。

if($('li:not(.valid)').length === 0) {
   // Everything's valid
}

编辑：如果您不想检查页面上的 all li-tags，请更具体地了解要检查的元素，例如 #pswd_info li列出#pswd_info 中元素内的元素。

来源：How to check if an element does NOT have a specific class?，https://api.jquery.com/length/

【讨论】：

size() 自 jQuery 1.8 起已被弃用。请改用.length。
感谢@TylerRoper，完全忽略了这一点
我想知道你的回答，== 和 === 有什么区别？
@lucumt - 在这种情况下，什么都没有，因为 length 和 0 都是数字。在一般情况下，如果操作数的类型不相同，== 无论如何都会使用类型强制来尝试找到相等性，因此（例如）"" == 0 为真。 === 不会尝试强制，不同类型的操作数永远不会相互 ===。但是当操作数的类型相同时，== 和=== 做同样的事情。

【解决方案2】：

我想在所有 li 元素都有“有效”类时 console.log() 一条消息。

所以你想在没有“有效”类的li 时记录一条消息。

然后只需检查选择器li:not(.valid) 是否返回一个空列表。

使用 vanilla JS，你会得到类似的东西：

if (document.querySelectorAll('li:not(.valid)').length === 0) {
    console.log("Your message");
}

【讨论】：

【解决方案3】：

当所有 li 元素都有“有效”类时，我想 console.log() 一条消息

您可以比较 2 个 jQuery 选择器的内容，以检查它们是否都有特定的类，例如

if( $('#pswd_info ul li').length == $('#pswd_info ul li.valid').length){
    console.log('all li inside #pswd_info ul has the valid class');
}

【讨论】：

【解决方案4】：

您没有显示用于实际添加标签的任何逻辑，但是当所有 (5) 个字段均为 .valid 时，它将显示。然而，这个确切的标签并不真正可持续或可扩展 - 最好删除无效标签，并查找 .invalid 等于 0 的字段数。

$('.newPwInput,.confirmPwInput').keyup(function() {
  var validCount = $('#pwd_info ul li.valid').length; // Count how many elements have the valid tag
  console.log(validCount);
  if (validCount == 5) {
    console.log('All fields are valid');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="confirmPwInput" type="password" name="confirm_password">
<input class="newPwInput" type="password" name="new_password">


<ul id="#pswd_info">
  <li id="letter" class="invalid">At least
    <strong>one letter</strong>
  </li>
  <li id="capital" class="invalid">At least
    <strong>one capital letter</strong>
  </li>
  <li id="number" class="invalid">At least
    <strong>one number</strong>
  </li>
  <li id="length" class="invalid">Be at least
    <strong>10 characters</strong>
  </li>
  <li id="match" class="invalid">
    <strong>Passwords must match</strong>
  </li>
</ul>

【讨论】：