javascript - JQuery .each 函数不工作

Question

我试图理解为什么以下不起作用:

function SetMaxLength() {
    var form = $("body").find("form");
    form.each(function () {
        var elements = $(this).find("input");
        elements.each(function() {
            var attr = $(this).attr('data-val-maxlength-max');
            if (typeof attr !== typeof undefined && attr !== false) {
                $(this).attr('maxlength', attr.value);
            }
        });
    });
}


<form action="/go/somewhere" autocomplete="off" class="form-one" method="post" role="form" novalidate="novalidate"> 
  <input data-val-maxlength="Invalid Email" data-val-maxlength-max="254" type="text" value="">
</form>

当我单步执行它时，它找到 1 个表单，但在每个部分它只是跳过它，跨过它。

基本上，当它看到 data-val-maxlength-max 属性时，它应该执行此操作，它应该获取其值并将 maxlength 属性注入(inject)到元素。

JsFiddle:https://jsfiddle.net/j04vue8r/3/

Answer 1

由于您的页面中已经包含了 jQuery，因此最好重写您的代码并使其更加“jQuery 风格”。

我们开始:

$('[data-val-maxlength-max]').each(function(){
  $(this).attr('maxlength', $(this).data('val-maxlength-max'));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/go/somewhere" autocomplete="off" class="form-one" method="post" role="form" novalidate="novalidate"> 
  <input data-val-maxlength="Invalid Email" data-val-maxlength-max="254" type="text" value="">
</form>