【问题标题】:jQuery - Looping through elements with specific AttributejQuery - 循环遍历具有特定属性的元素
【发布时间】:2013-04-11 18:11:35
【问题描述】:

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

我是这样做的:

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

【问题讨论】:

标签: jquery custom-attributes each


【解决方案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 代码相同,但更简洁一些。

【讨论】:

  • 快速补充:此代码将仅搜索具有所需数据属性的输入。我需要同时针对输入和选择。将第一行更改为 '$("[data-test]").each(function(){' 将解决这个问题...
【解决方案2】:
$("input[testdata]").each(function(){
  alert($(this).attr('testdata'));
 // do your stuff
});

working demo

【讨论】:

    【解决方案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 属性的所有元素并为其属性分配表单字段,请尝试

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

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

      【讨论】:

        猜你喜欢
        • 2018-04-13
        • 1970-01-01
        • 2011-08-20
        • 2011-06-11
        • 2020-01-20
        • 1970-01-01
        • 2010-09-15
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多