Come posso selezionare un elemento per nome con jQuery?

1227

Ho una colonna della tabella che sto cercando di espandere e nascondere:

jQuery sembra nascondere gli tdelementi quando lo seleziono per classe ma non per nome dell'elemento .

Ad esempio, perché:

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

Nota l'HTML di seguito, la seconda colonna ha lo stesso nome per tutte le righe. Come potrei creare questa raccolta usando l' nameattributo?

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

— TTT
fonte

7

La domanda non corrisponde al contenuto. ID e nome sono attributi diversi e sono selezionati in modo diverso

— Segna W

12

È contro gli standard W3C avere elementi con lo stesso ID; cioè gli ID duplicati sono un no no.

— Steve Tauber,

2178

È possibile utilizzare il selettore di attributi 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
fonte

1

Solo per curiosità, come si potrebbe scrivere questo come NON tcol1, come se volessero nascondere le colonne diverse dalle colonne denominate, tcol1?

— HPWD,

25

@Varun - puoi semplicemente omettere il td ... ad esempio $ ('[nome ^ = tcol]') corrisponderà a tutti gli elementi che hanno un attributo 'nome' con un valore che inizia con 'tcol'

— Jon Erickson

Ho dovuto usarlo come $ ('td [nome = tcol1]') - senza lo spazio tra td e [] mi ha restituito NULL.

— Akki il

@DougMolineux In realtà, sta abbinando la pre- correzione di un nome.

— mareoraft,

7

@HPWD useresti il selettore: not, $("td:not([name='tcol1'])")ad esempio. Puoi vederlo a questo violino

— JohannesB,

224

Qualsiasi attributo può essere selezionato usando [attribute_name=value]way. Vedi l'esempio qui :

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

— user2804791
fonte

ma dovresti usare il codice sopra, in modo da non perdere le qoutations! Buona fortuna e benvenuto nella comunità di

— Stackoverflow

7

Questo non funziona almeno per me - Ma la seguente dichiarazione funzionavar value = $("[name=nameofobject]");

— Pranav il

2

È sorprendente ottenere 17 voti positivi dopo 4 anni dalla risposta originale accettata

— Huangism,

6

21 voti adesso ... forse è perché la risposta è meno confusa di 'td [nome = tcol1]', soprattutto perché il td non è richiesto e quindi porta persone come me lungo la strada sbagliata

— Chris Sprague

2

I miei nomi di ingresso ha avuto un [] in questo modo: <input name="itemid[]">. Quindi questa risposta ha funzionato più perfettamente della risposta accettata, grazie al corretto utilizzo delle virgolette.

— Sunish Menon,

62

Se hai qualcosa come:

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

Puoi leggere tutto così:

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

Lo snippet:

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

Espandi frammento

— Andreas L.
fonte

26

È possibile ottenere la matrice di elementi per nome alla vecchia maniera e passare quella matrice a 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>

Espandi frammento

nota: l'unica volta che avresti un motivo per usare l'attributo "nome" dovrebbe essere la casella di controllo o gli ingressi radio.

Oppure potresti semplicemente aggiungere un'altra classe agli elementi per la selezione. (Questo è quello che vorrei fare)

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>

Espandi frammento

— Il tuo amico Ken
fonte

24

È possibile ottenere il valore del nome da un campo di input utilizzando l'elemento name in jQuery:

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>

Espandi frammento

— Shrikant D
fonte

+1 L'unico esempio fornito che seleziona un campo nome compreso il tipo e limita i risultati all'interno di una sezione ID.

— SharpC,

Sono d'accordo. Puoi avere più moduli nella tua pagina e limitarti a quello corretto è una buona idea.

— Kar.ma,

15

I frame di solito usano nomi di parentesi nei moduli, come:

<input name=user[first_name] />

È possibile accedervi tramite:

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

13

Ho fatto così e funziona:

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

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

— kscius
fonte

6

Hai dimenticato la seconda serie di virgolette, che rende errata la risposta accettata:

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

— Chris J
fonte

ad esempio se il nome del campo è'td[name="nested[fieldName]"]'

— relytmcd

Questo è molto vero Le versioni più recenti di jQuery (v. 3.2.1) hanno molte più probabilità di fallire quando incontrano un elemento selettore basato su attributi senza una corretta quotazione.

— HoldOffHunger,

5

Ecco una soluzione semplice: $('td[name=tcol1]')

— ospite
fonte

3

Puoi ottenere l'elemento in JQuery usando il suo attributo ID in questo modo:

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

— CalebHC
fonte

4

Corrisponde a un singolo elemento

— TTT

2

Mi dispiace per quello. Fai solo quello che ha detto Ben S.

— CalebHC,

Sì, questo è vero per l'ID. Per quanto riguarda la selezione per nome, penso che ci sia stato un post qui che si riferiva a Selettori / attributiEquals che è stato utile.

— TTT,

1

Forse la domanda è stata modificata, ma ora sta chiedendo il riferimento al nome, ma sì, singoli elementi possono utilizzare il selettore ID

— nckbrz,

Domanda in realtà per nome

— Prathamesh More

3

È possibile utilizzare qualsiasi attributo come selettore con [attribute_name=value].

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

3

Personalmente, quello che ho fatto in passato è dare loro un ID di classe comune e usarlo per selezionarli. Potrebbe non essere l'ideale in quanto hanno una classe specificata che potrebbe non esistere, ma rende la selezione molto più facile. Assicurati di essere unico nei nomi delle tue classi.

ad esempio, per l'esempio sopra, utilizzerei la selezione per classe Meglio ancora sarebbe cambiare il nome della classe da grassetto a 'tcol1', in modo da non ottenere inclusioni accidentali nei risultati jQuery. Se grassetto si riferisce effettivamente a una classe CSS, è sempre possibile specificare entrambi nella proprietà class, ad esempio 'class = "tcol1 bold"'.

In breve, se non è possibile selezionare per Nome, utilizzare un selettore jQuery complicato e accettare qualsiasi hit relativo alle prestazioni o utilizzare i selettori di classe.

Puoi sempre limitare l'ambito jQuery includendo il nome della tabella, ad esempio $ ('# tableID> .bold')

Ciò dovrebbe impedire a jQuery di cercare nel "mondo".

Potrebbe ancora essere classificato come un selettore complicato, ma limita rapidamente qualsiasi ricerca all'interno della tabella con l'ID di '#tableID', quindi riduce al minimo l'elaborazione.

Un'alternativa di questo se stai cercando più di 1 elemento all'interno di # table1 sarebbe quello di cercarlo separatamente e poi passarlo a jQuery poiché questo limita l'ambito, ma salva un po 'di elaborazione per cercarlo ogni volta.

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

— Steve Childs
fonte

Risposta un po 'prolissa, ma questo è fondamentalmente l'approccio globale corretto.

— HoldOffHunger,

2

Può essere un po 'prolisso, ma è meglio avere una spiegazione e un ragionamento in più dietro un suggerimento rispetto a una singola riga che spiega poco! ;) È utile quando qualcuno è nuovo a qualcosa e cerca di capire perché a) funziona eb) come funziona

— Steve Childs,

-13

Puoi usare la funzione:

get.elementbyId();

— Pratyush Goyal
fonte

2

OP voleva ottenere per nome , non per id. E cos'è get.elementbyId()? Volevi dire document.getElementById()?

— Barbsan,

8

No, chiede di selezionare un elemento per nome.

— Barbsan,