web-dev-qa-db-fra.com

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

Avoir une colonne de table que je cherche à développer et à masquer:

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

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 créer cette collection avec l'attribut name?

<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>
javascriptjqueryhtmldomjquery-selectors
1119
T.T.T.

Vous pouvez utiliser le sélecteur attribut :

$('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'
2015
Jon Erickson

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

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

Si vous avez quelque chose comme:

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

Vous pouvez lire tous comme ça:

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">
57
Andreas L.

Vous pouvez obtenir le tableau d'éléments en nommant l'ancienne méthode et le transmettre à 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>

remarque: la seule fois où vous auriez une raison d'utiliser l'attribut "name" devrait être pour les entrées case à cocher ou 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>
25
Your Friend Ken

Vous pouvez obtenir la valeur du nom d'un champ d'entrée 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>
22
Shrikant D

Frameworks utilise généralement noms de crochets dans les formulaires, tels que:

<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]\"]")
15
itsnikolay

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

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

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

13
kscius

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

5
Guest

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

$('td[name="tcol1"]')
4
Chris J

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. Le mieux serait de changer le nom de la classe de bold en 'tcol1', afin d'éviter toute inclusion accidentelle dans les résultats de jQuery. Si gras se réfère effectivement à une classe CSS, vous pouvez toujours spécifier les deux propriétés dans la propriété de classe, à savoir 'class = "tcol1 bold"'.

En résumé, si vous ne pouvez pas sélectionner par nom, utilisez un sélecteur jQuery complexe et acceptez tout impact négatif sur les performances, ou utilisez les sélecteurs de classe.

Vous pouvez toujours limiter la portée de jQuery en incluant le nom de la table, à savoir $ ('# tableID> .bold')

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

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

Si vous recherchez plus d'un élément dans # table1, vous pouvez également le rechercher séparément, puis le transmettre à 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); 
}
3
Steve Childs

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

$('td[name=tcol1]').hide();
3
user6139189
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>
3
sumith deepan

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

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