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

1227

J'ai une colonne de table que j'essaye de développer et de cacher:

jQuery semble masquer les tdéléments 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 porte le même nom pour toutes les lignes. Comment pourrais-je créer cette collection en utilisant l' nameattribut?

<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>
javascript jquery html dom jquery-selectors TTT
la source
7
La question ne correspond pas au contenu. L'ID et le nom sont des attributs différents et sont sélectionnés différemment
Mark W
12
Il est contraire aux normes du W3C d'avoir des éléments avec le même ID; c'est-à-dire que les identifiants en double sont un non non.
Steve Tauber

Réponses:

2178

Vous pouvez utiliser le sélecteur d'attribut jQuery :

$('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'
Jon Erickson
la source
1
Juste par curiosité, comment pourrait-on écrire ceci comme PAS tcol1, comme si ils voulaient cacher les colonnes autres que les colonnes nommées, tcol1?
HPWD
25
@Varun - vous pouvez simplement omettre le td ... par exemple $ ('[nom ^ = tcol]') fera correspondre tous les éléments qui ont un attribut 'nom' avec une valeur qui commence par 'tcol'
Jon Erickson
Je devais l'utiliser comme $ ('td [name = tcol1]') - sans l'espace entre td et [] cela me renvoyait NULL.
akki
, Il est fait @DougMolineux correspondant le pré fix d'un nom.
mareoraft
7
@HPWD, vous utiliseriez le sélecteur: not, $("td:not([name='tcol1'])")par exemple. Vous pouvez le voir sur ce violon
JohannesB
224

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

var value = $("[name='nameofobject']");
user2804791
la source
mais vous devez utiliser le code ci-dessus, afin de ne pas manquer les qoutations! Bonne chance et bienvenue dans la communauté Stackoverflow :)
Afzaal Ahmad Zeeshan
7
Cela ne fonctionne pas du moins pour moi - Mais la déclaration suivante fonctionnevar value = $("[name=nameofobject]");
Pranav
2
Il est surprenant que cela reçoive 17 votes positifs lorsque cela est arrivé 4 ans après la réponse initialement acceptée
Huangisme
6
21 votes positifs maintenant ... c'est peut-être parce que la réponse est moins confuse que 'td [name = tcol1]', d'autant plus que le td n'est pas requis et conduit donc des gens comme moi sur le mauvais chemin
Chris Sprague
2
Mes noms d'entrée avaient un [] comme ceci: <input name="itemid[]">. Cette réponse a donc fonctionné plus parfaitement que la réponse acceptée, grâce à l'utilisation appropriée des guillemets.
Sunish Menon
62

Si vous avez quelque chose comme:

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

Vous pouvez tout lire 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">
Développer l'extrait

Andreas L.
la source
26

Vous pouvez obtenir le tableau des éléments par leur nom à l'ancienne 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>
Développer l'extrait

remarque: la seule fois où vous auriez une raison d'utiliser l'attribut "nom" devrait être pour les cases à cocher ou les entrées radio.

Ou vous pouvez simplement ajouter une autre classe aux éléments à sélectionner (c'est ce que je ferais)

function toggleByClass(bolShow) {
  if (bolShow) {
    $(".rowToToggle").show();
  } else {
    $(".rowToToggle").hide();
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <title>sandBox</title>
  </head>
  <body>
    <table>
      <tr>
        <td>data1</td>
        <td class="bold rowToToggle">data2</td>
      </tr>
      <tr>
        <td>data1</td>
        <td class="bold rowToToggle">data2</td>
      </tr>
      <tr>
        <td>data1</td>
        <td class="bold rowToToggle">data2</td>
      </tr>
    </table>
    <input type="button" onclick="toggleByClass(true);" value="show"/>
    <input type="button" onclick="toggleByClass(false);" value="hide"/>
  </body>
</html>
Développer l'extrait

Votre ami Ken
la source
24

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

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>
Développer l'extrait

Shrikant D
la source
+1 Le seul exemple donné qui sélectionne un champ de nom incluant le type et limite les résultats à l'intérieur d'une section id.
SharpC
Je suis d'accord. Vous pouvez avoir plusieurs formulaires dans votre page, et se limiter au bon est une bonne idée.
Kar.ma
15

Les cadres utilisent généralement des noms de parenthèses dans les formulaires, comme:

<input name=user[first_name] />

Ils sont accessibles 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]\"]")
itsnikolay
la source
6

Vous avez oublié le deuxième ensemble de guillemets, ce qui rend la réponse acceptée incorrecte:

$('td[name="tcol1"]')
Chris J
la source
par exemple si le nom du champ est'td[name="nested[fieldName]"]'
relytmcd
C'est très vrai. Les nouvelles versions de jQuery (v. 3.2.1) sont beaucoup plus susceptibles d'échouer lors de la rencontre d'un élément de sélection basé sur des attributs sans guillemets appropriés.
HoldOffHunger
5

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

Client
la source
3

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

$("#tcol1").hide();
CalebHC
la source
4
Correspond à un seul élément uniquement
TTT
2
Désolé pour ça. Faites ce que Ben S a dit.
CalebHC
Oui, c'est vrai pour l'ID. En ce qui concerne la sélection par nom, je pense qu'il y avait un article ici faisant référence à Selectors / attributeEquals qui était utile.
TTT
1
Peut-être que la question a été modifiée, mais il demande maintenant la référence du nom, mais oui, des éléments simples peuvent utiliser le sélecteur d'ID
nckbrz
Question en fait pour le nom
Prathamesh Plus
3

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

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

la source
3

Personnellement, ce que j'ai fait dans le passé, c'est de leur donner un identifiant de classe commun et de l'utiliser pour les sélectionner. Ce n'est peut-être pas 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 simplement que vous êtes unique dans vos noms de classe.

c'est-à-dire que pour l'exemple ci-dessus, j'utiliserais votre sélection par classe. Mieux encore serait de changer le nom de la classe de gras en «tcol1», afin que vous n'obteniez aucune inclusion accidentelle dans les résultats de jQuery. Si bold fait réellement référence à une classe CSS, vous pouvez toujours spécifier les deux dans la propriété class - ie 'class = "tcol1 bold"'.

En résumé, si vous ne pouvez pas sélectionner par nom, utilisez un sélecteur jQuery compliqué et acceptez tout résultat de performance associé ou utilisez des 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».

Son pourrait toujours être classé comme un sélecteur compliqué, mais il contraint rapidement toute recherche dans la table avec l'ID de '#tableID', donc maintient le traitement au minimum.

Si vous recherchez plus d'un élément dans # table1, vous pouvez le rechercher séparément, puis le transmettre à jQuery car cela limite la portée, mais économise 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); 
}
Steve Childs
la source
Réponse un peu verbeuse, mais c'est fondamentalement la bonne approche globale.
HoldOffHunger
2
Peut être un peu verbeux, mais il vaut mieux avoir un peu d'explication et de raisonnement supplémentaires derrière une suggestion qu'une seule ligne qui explique peu! ;) C'est utile quand quelqu'un est nouveau dans quelque chose et essaie de comprendre pourquoi a) ça marche et b) comment ça marche
Steve Childs
-13

Vous pouvez utiliser la fonction:

get.elementbyId();
Pratyush Goyal
la source
2
OP voulait obtenir son nom , pas son identifiant. Et c'est quoi get.elementbyId()? Tu voulais dire document.getElementById()?
barbsan
8
Non, il demande de sélectionner un élément par son nom.
barbsan