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, потому что есть ошибка в коде: атр только значение 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); 
      } 
     }); 

    }); 

} 

Все, что я сделал был удален attr.value в вашем заявлении if. Прекрасно работает для меня. Вам не нужно значение, так как вы уже схватили его в переменной:). Я бы посоветовал вам не использовать общие термины, такие как «форма» и «элементы» и «attr». Они могут вызвать проблемы.

Кстати, в будущем вы можете использовать console.log. Это помогло мне разобраться с этой проблемой. Я сделал console.log(attr) сразу после линии var attr, чтобы посмотреть, что мы получаем. В Chrome вы можете просмотреть консоль, нажав Ctrl + Shift + J. Поскольку я видел, что это было 254, я знал, что нам не нужно получать новое значение:).