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


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

jQuery semble cacher le td éléments quand je le sélectionne par classe mais pas par élément prénom.

Par exemple, pourquoi fait:

$(".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 pourrais-je créer cette collection en utilisant le name attribut?

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

959
2017-07-10 01:05


origine


Réponses:


Vous pouvez utiliser le attribut sélecteur:

$('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'

1801
2017-07-10 01:21



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

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

168
2017-09-22 19:07



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


51
2017-07-09 18:34



Vous pouvez obtenir le tableau d'éléments par nom à l'ancienne et transmettre 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>

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

Ou vous pourriez simplement ajouter une autre classe aux éléments pour la sélection. (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>


22
2017-07-11 05:25



Vous pouvez obtenir la valeur name à partir d'un champ de saisie en utilisant l'élément name 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>


18
2018-06-15 05:52



Cadres utilise habituellement noms dans des formes, 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]\"]")

13
2017-10-16 16:27



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

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

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


12
2018-03-25 20:27



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


5
2018-04-27 18:47



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

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

3
2018-03-31 12:51



Personnellement, ce que j'ai fait dans le passé 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 n'existe peut-être pas, mais cela rend la sélection beaucoup plus facile. Assurez-vous d'être unique dans vos noms de classe.

c'est-à-dire pour l'exemple ci-dessus, j'utiliserais votre sélection par classe. Mieux encore, changer le nom de la classe de bold à 'tcol1', donc vous n'obtiendrez aucune inclusion accidentelle dans les résultats de jQuery. Si bold fait référence à une classe CSS, vous pouvez toujours spécifier both dans la propriété de classe - c'est-à-dire 'class = "tcol1 bold"'.

En résumé, si vous ne pouvez pas sélectionner par nom, utilisez un sélecteur jQuery compliqué et acceptez les performances associées ou utilisez des sélecteurs de classe.

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

Cela devrait empêcher jQuery de chercher dans le "monde".

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

Une alternative à ceci si vous cherchez plus de 1 élément dans # table1 serait de rechercher ceci séparément et de le passer à 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); 
}

3
2018-02-23 12:16