javascript - 任何内部元素都是可见的 jQuery

Question

是否有其他快速方法可以使用 jQuery 实现以下功能。

我的表单验证场景如下:

• 如果表单中出现错误，则在 #errorList 内的 li 中显示该字段的错误消息。
• 如果用户进行更正，则隐藏与已更正错误匹配的 li
• 如果再次出现错误(由于页面上的计算)，则显示相同的错误。
• 在提交之前/之前，我需要检查是否隐藏了所有错误消息。如果是这样，则只需提交表格。

HTML:

  <ul id="errorList" class="errorlist" style="display: inline-block;">
       <li style="display: none;">不正な日付です</li>
       <li class="">16 文字以内にしてください</li>
       <li style="display: none;">不正な日付です</li>
       <li style="display: none;">不正な日付です</li>
  </ul>

js:

 function has_any_visible_errors(){
    var innerHiddens = [];
    $("#errorList li").each(function(){
      if($(this).is(":not(':visible')")){
        innerHiddens.push(true);  
      }else{
        innerHiddens.push(false);   
      }
    });
    return (innerHiddens.indexOf(false) == -1)?true:false;
}

Answer 1

试试这个:您可以使用 :visible 来查找可见 li 元素并检查可见 li 的数量，如果大于 0 则返回 true。

function has_any_visible_errors(){  
    return $("#errorList li:visible").length > 0;
}