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屬性注入到元素中。

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> 

Answer 2

我已經試過了您的代碼，但並沒有覆蓋每個函數。 問題在於attr()函數未設置maxlenght屬性，因為您在代碼中有一個錯誤：attr只是data-val-maxlength-max ，因此您必須編寫如下內容：

$(this).attr('maxlength', attr);

Answer 3

這可以滿足您的需求：

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

Answer 4

上面的代碼有兩個問題。 1.函數SetMaxLength不被調用。2.變量attr已經包含值。 因此您不需要做attr.value

下面的代碼有效

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);
        }
    });
});

} SetMaxLength（）

Answer 5

嘗試這個

   window.onload = function () {
    SetMaxLength(); 
}

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');
            console.log(attr);
            if (typeof attr !== typeof undefined && attr !== false) {
                $(this).attr('maxlength', attr);
            }
        });

    });

}

我所做的就是在if語句中刪除attr.value 。 對我來說很好。 您不需要該值，因為您已經將其捕獲到變量：中。 我鼓勵您不要使用諸如“表單”，“元素”和“屬性”之類的通用術語。 它們可能會引起問題。

順便說一句，將來您可能希望使用console.log。 它幫助我在這里找出問題。 我在var attr行之后做了console.log(attr)來看看我們得到了什么。 在Chrome中，您可以通過按ctrl + shift + J來查看控制台。由於我看到的是254，所以我知道我們不需要獲取新值了：）。