Comment puis-je sélectionner un élément par nom avec jQuery?

J'ai une colonne de table J'essaie de développer et de masquer:

JQuery semble cacher les éléments td lorsque je le sélectionne par classe mais pas par nom d' élément.

Par exemple, pourquoi:

$(".bold").hide(); // selecting by class works $("tcol1").hide(); // select by element name does not work 

Notez le code HTML ci-dessous, la deuxième colonne a le même nom pour toutes les lignes. Comment puis-je créer cette collection en utilisant l'attribut de nom?

 <tr> <td>data1</td> <td name="tcol1" class="bold"> data2</td> </tr> <tr> <td>data1</td> <td name="tcol1" class="bold"> data2</td> </tr> <tr> <td>data1</td> <td name="tcol1" class="bold"> data2</td> </tr> 

Vous pouvez utiliser le sélecteur d'attributs

 $('td[name=tcol1]') // matches exactly 'tcol1' $('td[name^=tcol]') // matches those that begin with 'tcol' $('td[name$=tcol]') // matches those that end with 'tcol' $('td[name*=tcol]') // matches those that contain 'tcol' 

Tout attribut peut être sélectionné en utilisant [attribute_name=value] way. Voir l'exemple ici :

 var value = $("[name='nameofobject']"); 

Si vous avez quelque chose comme:

 <input type="checkbox" name="mycheckbox" value="11" checked=""> <input type="checkbox" name="mycheckbox" value="12"> 

Vous pouvez lire tout comme ceci:

 jQuery("input[name='mycheckbox']").each(function() { console.log( this.value + ":" + this.checked ); }); 

L'extrait:

 jQuery("input[name='mycheckbox']").each(function() { console.log( this.value + ":" + this.checked ); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="checkbox" name="mycheckbox" value="11" checked=""> <input type="checkbox" name="mycheckbox" value="12"> 

Vous pouvez obtenir le tableau d'éléments par nom de l'ancien mode et passer ce tableau à jQuery.

 function toggleByName() { var arrChkBox = document.getElementsByName("chName"); $(arrChkBox).toggle(); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <title>sandBox</title> </head> <body> <input type="radio" name="chName"/><br /> <input type="radio" name="chName"/><br /> <input type="radio" name="chName"/><br /> <input type="radio" name="chName"/><br /> <input type="button" onclick="toggleByName();" value="toggle"/> </body> </html> 

Vous pouvez obtenir la valeur du nom à partir d'un champ de saisie à l'aide de l'élément de nom dans jQuery par:

 var firstname = jQuery("#form1 input[name=firstname]").val(); //Returns ABCD var lastname = jQuery("#form1 input[name=lastname]").val(); //Returns XYZ console.log(firstname); console.log(lastname); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="form1" id="form1"> <input type="text" name="firstname" value="ABCD"/> <input type="text" name="lastname" value="XYZ"/> </form> 

J'ai fait comme ça et ça marche:

 $('[name="tcol1"]') 

https://api.jquery.com/attribute-equals-selector/

Les cadres utilisent habituellement des noms de supports dans des formulaires, comme:

 <input name=user[first_name] /> 

Ils peuvent être consultés par:

 // in JS: this.querySelectorAll('[name="user[first_name]"]') // in jQuery: $('[name="user[first_name]"]') // or by mask with escaped quotes: this.querySelectorAll("[name*=\"[first_name]\"]") 

Voici une solution simple: $('td[name=tcol1]')

Vous pouvez utiliser n'importe quel attribut comme sélecteur avec [attribute_name=value] .

 $('td[name=tcol1]').hide(); 

Vous pouvez obtenir l'élément dans JQuery en utilisant son attribut ID comme ceci:

 $("#tcol1").hide(); 

Personnellement, ce que j'ai fait dans le passé, c'est leur donner un identifiant de classe commun et l'utiliser pour les sélectionner. Il peut ne pas être idéal car ils ont une classe spécifiée qui peut ne pas exister, mais cela rend la sélection beaucoup plus facile. Assurez-vous que vous êtes unique dans vos noms de classe.

C'est-à-dire pour l'exemple ci-dessus, j'utiliserais votre sélection par classe. Mieux encore serait de changer le nom de la classe de gras à 'tcol1', donc vous n'obtenez aucune inclusion accidentelle dans les résultats jQuery. Si gras se réfère réellement à une classe css, vous pouvez toujours spécifier les deux dans la propriété de classe – c'est-à-dire 'class = "tcol1 bold"'.

En résumé, vous ne pouvez pas sélectionner par Nom, utilisez un sélecteur JQuery compliqué et acceptez les résultats liés ou utilisez les sélecteurs de classe.

Vous pouvez toujours limiter la portée de JQuery en incluant le nom de la table, c'est-à-dire

 $('#tableID > .bold') 

Cela devrait empêcher JQuery de rechercher le "monde".

Il peut toujours être classé comme un sélecteur compliqué, mais il limite rapidement toute recherche à l'intérieur de la table avec l'ID de '#tableID', donc garde le traitement au minimum.

Une alternative à cela si vous cherchez plus d'un élément dans # table1 serait de rechercher cela séparément, puis de le passer à JQuery car cela limite la portée, mais enregistre un peu de traitement pour le rechercher à chaque fois.

 var tbl = $('#tableID'); var boldElements = $('.bold',tbl); var rows = $('tr',tbl); if (rows.length) { var row1 = rows[0]; var firstRowCells = $('td',row1); } 

Pour masquer tout td qui a le nom "tcol1"

 $('td[name=tcol1]').hide() 
 function toggleByName() { var arrChkBox = document.getElementsByName("chName"); $(arrChkBox).toggle(); } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <html> <head> <title>sandBox</title> </head> <body> <input type="text" name="chName"/><br /> <input type="text" name="chName"/><br /> <input type="text" name="chName"/><br /> <input type="text" name="chName"/><br /> <input type="button" onclick="toggleByName();" value="toggle"/> </body> </html> 
 <script src="jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var a= $("td[name=tcol3]").html(); alert(a); }); </script> <table border="3"> <tr> <td>data1</td> <td name="tcol1" class="bold"> data2tcol1</td> </tr> <tr> <td>data1</td> <td name="tcol2" class="bold"> data2tcol2</td> </tr> <tr> <td>data1</td> <td name="tcol3" class="bold"> data2tcol3</td> </tr> </table> 

C'est le code qui peut être utile.