web-dev-qa-db-ja.com

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>

期待どおりに「John」、「Smith」を出力します。

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私が間違っていることを誰でも見ることができますか？

jquerycustom-attributeseach
19
coffeemonitor

ここでは、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コードと同じことをしていますが、もう少し簡潔です。

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

working demo

7
Mohammad Adil

特定の属性名を持つ入力を選択し、これらの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());
});
3
Gouda Elalfy

testdata属性を持つすべての要素を反復処理し、属性が保持するものでフォームフィールドを割り当てる

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

[私が推測するすべての要素で動作する]

1
qwerty