web-dev-qa-db-fra.com

jQuery - Boucle à travers des éléments avec un attribut spécifique

Je sais comment parcourir les entrées ci-dessous, en recherchant celles avec une classe spécifique de "testeurs"

Et voici comment je fais ça:

<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>

Il sort le "John", "Smith" comme prévu.

Je ne souhaite pas utiliser le class="testing" et utilisez un attribut personnalisé: testdata="John".

Voici donc ce que je ferais:

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

Mon objectif est de remplir automatiquement les valeurs de chaque entrée avec tout ce qui se trouve à l'intérieur de testdata, mais uniquement celles détectées comme ayant l'attribut testdata.

Ce fut ma tentative infructueuse d'utiliser le $.each boucle:

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

J'obtiens cette réponse: Uncaught TypeError: Cannot read property 'length' of undefined Quelqu'un peut-il voir ce que je fais mal?

jquerycustom-attributeseach
19
coffeemonitor

Ici, il utilise le HTML5 data-* attribut:

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);
});

Ici, cela fonctionne: http://jsfiddle.net/SFVYw/

Une manière encore plus courte de le faire serait d'utiliser ce JS:

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

En interne, il fait la même chose que l'autre code JS, mais il est juste un peu plus concis.

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

démo de travail

7
Mohammad Adil

si vous voulez sélectionner des entrées avec un nom d'attribut spécifique et que vous avez ces entrées 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'>

vous pouvez faire une boucle sur les administrateurs uniquement comme ceci:

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

de la même manière, vous ne pouvez boucler que pour les utilisateurs:

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

Pour itérer sur tous les éléments avec l'attribut testdata et affecter des champs de formulaire avec ce que leur attribut contient, essayez

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

[fonctionne avec tous les éléments, je suppose]

1
qwerty