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：あなたはすでにjQueryのは、あなたのページに含まれているのでhttps://jsfiddle.net/j04vue8r/3/

Answer 1

、それはあなたのコードを書き換えると、それはより多くの「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

は、私はあなたのコードを試してみたし、それはそれぞれの機能の上に乗りません。問題は、コード内の間違いを持っ​​ているのでmaxlenght属性を設定していないattr()機能である：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

上記のコードには2つの問題があります。 1.関数SetMaxLengthは呼び出されません 2.変数attrにはすでに値が含まれています。だから、

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

    }); 

} 

私はすべてを試してみて動作するコードの下attr.value

をする必要はありませんif文でattr.valueを削除しました。私のためにうまく動作します。すでに値を変数につけているので、値は必要ありません：）。私はあなたが "フォーム"や "要素"や "attr"のような一般的な用語を使用しないように勧めます。彼らは問題を引き起こすかもしれません。

ところで、将来的にはconsole.logを使いたいかもしれません。それはここで問題を把握するのに役立ちました。私はvar attr行の直後にconsole.log(attr)を行って、私たちが得たものを見ていました。 Chromeでは、Ctrl + Shift + Jを押してコンソールを表示できます。私は254だったので、新しい値を得る必要はないことを知っていました：）