JQuery - Зацикливание элементов с определенным атрибутом

Я знаю, как перемещаться по входам ниже, ища те, у кого есть определенный класс "тестеров"

И вот как я это делаю:

<input type='text' name='firstname' class="testing" value='John'>
<input type='text' name='lastname' class="testing" value='Smith'>

<script type="text/javascript">
$(document).ready(function(){

 $.each($('.testing'), function() { 
   console.log($(this).val());
 });

});
</script>

Он выводит "Джон", "Смит", как ожидалось.

Я хочу не использовать class="testing" и использовать настраиваемый атрибут: testdata="John".

Так вот что я буду делать:

<input type='text' name='firstname' testdata='John'>
<input type='text' name='lastname' testdata='Smith'>

Моя цель - автоматическое заполнение значений каждого входа тем, что находится внутри testdata, но только те, которые обнаружены, имеют атрибут testdata.

Это была моя неудачная попытка использовать цикл $.each:

$.each($('input').attr('testdata'), function() {
  var testdata = $(this).attr('testdata');
  $(this).val(testdata);    
});

Получаю этот ответ: Uncaught TypeError: Cannot read property 'length' of undefined Может ли кто-нибудь увидеть, что я делаю неправильно?

Ответ 1

Здесь используется атрибут HTML5 data-*:

HTML:

<input type='text' name='firstname' data-test='John'>
<input type='text' name='lastname' data-test='Smith'>

JS:

$("input[data-test]").each(function(){
    var testdata = $(this).data('test');
    $(this).val(testdata);
});

Здесь он работает: http://jsfiddle.net/SFVYw/

Еще более короткий способ сделать это будет использовать этот JS:

$("input[data-test]").val(function(){
    return $(this).data('test');
});

Внутри он делает то же, что и другой JS-код, но он немного более краток.

Ответ 2

$("input[testdata]").each(function(){
  alert($(this).attr('testdata'));
 // do your stuff
});

рабочая демонстрация

Ответ 3

если вы хотите выбрать входы с определенным именем атрибута, и у вас есть эти входы html:

<input type='text' name='user1' fieldname="user" class="testing" value='John1'>
<input type='text' name='user2' fieldname="user" class="testing" value='Smith1'>
<input type='text' name='admin1' fieldname="admin" class="testing" value='John2'>
<input type='text' name='admin2' fieldname="admin" class="testing" value='Smith2'>

вы можете вставлять администраторы только так:

$("input[fieldname='admin']").each(function(){
    alert($(this).val());
});

тем же способом, вы можете циклически только для пользователей:

$("input[fieldname='user']").each(function(){
    alert($(this).val());
});

Ответ 4

Для итерации по всем элементам с атрибутом testdata и назначением полей формы с использованием их атрибута try

$("[testdata]").each(function(){
    $(this).val($(this).attr('testdata'))
})

[работает со всеми элементами, я думаю]