jQuery获取具有特定参数的子元素的数量

Question

我有以下代码片段，它是在提交表单时执行的。然而，下面的逻辑是不正确的，因为其意图是开发一个通用函数，它可以用于我的DOM中的所有表单。一旦反复失败，我最终创建了一个特定于此表单的函数，它验证了我表单中输入字段的值是否与它们的自定义defVal属性相同，如果是这样，表单将停止提交，并且错误消息将会弹出。我如何检查我的表单中的任何子元素是否满足特定参数，例如输入字段并具有.val（）== .attr（'defVal'）？

我已经尝试使用.find（），.children（）和.childNode功能。可能有人请建议我一个很好的解决方案，如果可能的话说明你的代码

HTML：

<div class="login" align="center"> 
<div class="formWrapper"> 
    <form action="index.php?r=backoffice" method="post"> 
     <input type="text" name="USERNAME" required value="username" defval="username" maxlength="16"> 
     <input type="password" name="PASSWORD" required value="password" defval="password" maxlength="16"> 
     <input type="reset" value="reset"> 
     <input type="submit" value="submit"> 
     <hr/> 
     <a href="#" class="helpLink">Can't log in?</a> 
    </form> 
</div> 
<div class="infoWrapper"> 
    <div class="info"> 

    </div> 
</div> 

的jQuery：

$('div.login').ready(function(){ 
$('div.login form').submit(function(e){ 
    if($('div.login form input').val()==$('div.login form input').attr('defVal')){ 
     var numMsgs=$('div.login form').children(); 
     if(numMsgs.length<=6){ 
      var formHtml=$('div.login form').html(); 
      $('div.login form').html('<a class="sysMsg" href="#">error::invalid username/password</a>'+formHtml); 
      $('div.login form a.sysMsg').addClass('errFatal').fadeIn(300).delay(5000).fadeOut(300); 
     } 
    e.preventDefault(); 
    } 
}); 

}）;

Answer 1

尝试（这种模式）

$(function() { 
    var elems = $(".login input[defval]"); 
    console.log(elems.length); 
    $.each(elems, function (i, el) { 
     if ($(el).val() === $(el).attr("defval")) { 
      // do stuff 
      console.log(i, $(el).val() === $(el).attr("defval"), $(el)); 
     }; 
    }); 
}); 

的jsfiddle http://jsfiddle.net/guest271314/9578v/

Answer 2

睡在我最终设法做任务的主题之后。我已经改变了一下html。无论如何谢谢你的建议，因为它非常有用和真实地吸引我的东西。

HTML：

<div class="login" align="center"> 
<div class="formWrapper"> 
    <form action="index.php?r=backoffice" method="post"> 
     <p class="jQueryErr"> 
     <?php 
      if(!empty($_POST['USERNAME']) && !empty($_POST['PASSWORD'])){ 
       phpClass::USER_login($_POST['USERNAME'],'username',$_POST['PASSWORD'],'password'); 
      } 
     ?> 
     </p> 
     <input type="text" name="USERNAME" value="username" defval="username" maxlength="16"> 
     <input type="password" name="PASSWORD" value="password" defval="password" maxlength="16"> 
     <input type="reset" value="reset"> 
     <input type="submit" value="submit"> 
     <hr/> 
     <a href="#" class="helpLink">Can't log in?</a> 
    </form> 
</div> 

的jQuery：

$('form').submit(function(e){ 
    var elems=$(this).find('input[defval]'); 
    var errWrapper=$(this).find('p.jQueryErr'); 
    for(var i=0; i<elems.length; i++){ 
     if($(elems[i]).val()==$(elems[i]).attr('defVal')){ 
      $(errWrapper[0]).html('<a class="sysMsg errWarning" href="#">error:: invalid username/password</a>'); 
      var formSysMsg=$('p.jQueryErr a.sysMsg'); 
      $(formSysMsg[0]).fadeIn(300).delay(5000).fadeOut(300); 
      e.preventDefault(); 
      break; 
     }else if($(elems[i]).val().length<8){ 
      $(errWrapper[0]).html('<a class="sysMsg errWarning" href="#">error::'+ $(elems[i]).attr('defVal') +'::is too short!</a>'); 
      var formSysMsg=$('p.jQueryErr a.sysMsg'); 
      $(formSysMsg[0]).fadeIn(300).delay(5000).fadeOut(300); 
      e.preventDefault(); 
      break; 
     } 
    } 
});