jQuery - 循环使用具有特定属性的元素

时间:2013-04-18 14:49:17

标签: jquery custom-attributes each

我知道如何遍历下面的输入,搜索具有特定类别“测试者”的输入

以下是我的表现方式:

<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 谁能看到我做错了什么?

4 个答案:

答案 0 :(得分:34)

这里使用的是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代码一样,但它只是更简洁一点。

答案 1 :(得分:7)

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

working demo

答案 2 :(得分: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());
});

答案 3 :(得分:1)

对于使用testdata属性迭代所有元素并使用其属性保存的表单字段进行迭代尝试

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

[适用于我猜的所有元素]