Como posso selecionar um elemento pelo nome com o jQuery?

1227

Tenha uma coluna da tabela que estou tentando expandir e ocultar:

O jQuery parece ocultar os tdelementos quando eu o seleciono por classe, mas não pelo nome do elemento .

Por exemplo, por que:

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

Observe o HTML abaixo, a segunda coluna tem o mesmo nome para todas as linhas. Como eu poderia criar esta coleção usando o nameatributo?

<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
A pergunta não corresponde ao conteúdo. O ID e o nome são atributos diferentes e são selecionados de maneira diferente #
W Mark
12
É contra os padrões do W3C ter elementos com o mesmo ID; ou seja, IDs duplicados são um não não.
21413 Steve Tauber # 1:

Respostas:

2178

Você pode usar o seletor de atributo 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
Por curiosidade, como alguém escreveria isso como NÃO tcol1, como se quisessem ocultar outras colunas além das denominadas tcol1?
HPWD 03/02/12
25
@Varun - você só pode omitir o td ... por exemplo $ ( '[nome ^ = Tcol]') irá corresponder a todos os elementos que têm um 'nome' atributo com um valor que começa com 'Tcol'
Jon Erickson
Eu tive que usá-lo como $ ('td [name = tcol1]') - sem o espaço entre td e [] ele me retornou NULL.
akki
@DougMolineux Na verdade, ele está combinando a pré- correção de um nome.
Mareoraft 17/10/2015
7
@ HPWD você usaria o seletor: not, $("td:not([name='tcol1'])")por exemplo. Você pode vê-lo no presente fiddle
JohannesB
224

Qualquer atributo pode ser selecionado usando [attribute_name=value]way. Veja a amostra aqui :

var value = $("[name='nameofobject']");
user2804791
fonte
mas você deve usar o código acima, para não perder as citações! Boa sorte e bem-vindo à comunidade Stackoverflow :)
Afzaal Ahmad Zeeshan
7
Isto não está funcionando, pelo menos para mim - Mas seguindo obras declaraçãovar value = $("[name=nameofobject]");
Pranav
2
É surpreendente este get 17 upvotes quando este veio 4 anos após a resposta aceita originais
Huangism
6
21 upvotes agora ... talvez seja porque a resposta é menos confuso do que 'td [name = tcol1]', especialmente desde que o td não é necessário e, portanto, leva as pessoas como eu para o caminho errado
Chris Sprague
2
Meus nomes de entrada tinha um [] como este: <input name="itemid[]">. Portanto, essa resposta funcionou mais perfeitamente do que a resposta aceita, graças ao uso adequado das aspas.
Sunish Menon 30/07/2016
62

Se você tem algo como:

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

Você pode ler tudo assim:

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

O trecho:

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

Andreas L.
fonte
26

Você pode obter a matriz de elementos pelo nome da maneira antiga e passar essa matriz para o 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>

nota: o único momento em que você teria um motivo para usar o atributo "name" deve ser para caixas de seleção ou entradas de rádio.

Ou você pode simplesmente adicionar outra classe aos elementos para seleção (é o que eu faria)

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>

Your Friend Ken
fonte
24

Você pode obter o valor do nome de um campo de entrada usando o elemento name no 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>

Shrikant D
fonte
+1 O único exemplo dado que seleciona um campo de nome, incluindo o tipo e limita os resultados a uma seção de identificação.
SharpC
Concordo. Você pode ter vários formulários em sua página, e restringir ao adequado é uma boa idéia.
1919 Kar.ma
15

Estruturas geralmente usam nomes de colchetes em formulários, como:

<input name=user[first_name] />

Eles podem ser acessados ​​por:

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

Você esqueceu o segundo conjunto de aspas, o que torna a resposta aceita incorreta:

$('td[name="tcol1"]') 
Chris J
fonte
por exemplo, se o nome do campo for'td[name="nested[fieldName]"]'
trusttmcd 13/06/18
Isso é verdade. Versões mais recentes do jQuery (v. 3.2.1) têm muito mais probabilidade de falhar ao encontrar um elemento seletor baseado em atributo sem citar corretamente.
HoldOffHunger
5

Aqui está uma solução simples: $('td[name=tcol1]')

Hóspede
fonte
3

Você pode obter o elemento no JQuery usando seu atributo ID como este:

$("#tcol1").hide();
CalebHC
fonte
4
Corresponde apenas a um único elemento
TTT
2
Me desculpe por isso. Basta fazer o que Ben S disse.
10119 CalebHC
Sim, isso é verdade sobre o ID. Quanto à seleção pelo nome, acho que houve um post aqui referindo-se a Selectors / attributeEquals que foi útil.
TTT
1
Talvez a questão foi editado, mas ele está a pedir referência de nome agora, mas sim elementos individuais podem usar o seletor id
nckbrz
Pergunta realmente para o nome
Prathamesh Mais
3

Você pode usar qualquer atributo como seletor com [attribute_name=value].

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

fonte
3

Pessoalmente, o que eu fiz no passado é fornecer a eles um ID de classe comum e usá-lo para selecioná-los. Pode não ser o ideal, pois eles têm uma classe especificada que pode não existir, mas facilita muito a seleção. Apenas verifique se você é único em seus nomes de classe.

ou seja, para o exemplo acima, eu usaria sua seleção por classe. Melhor ainda seria alterar o nome da classe de negrito para 'tcol1', para que você não obtenha inclusões acidentais nos resultados do jQuery. Se bold realmente se refere a uma classe CSS, você sempre pode especificar ambos na propriedade class - ie 'class = "tcol1 bold"'.

Em resumo, se você não puder selecionar por Nome, use um seletor jQuery complicado e aceite qualquer ocorrência de desempenho relacionada ou use os seletores de Classe.

Você sempre pode limitar o escopo do jQuery incluindo o nome da tabela, ou seja, $ ('# tableID> .bold')

Isso deve restringir o jQuery de pesquisar no "mundo".

Ele ainda pode ser classificado como um seletor complicado, mas restringe rapidamente qualquer pesquisa na tabela com o ID de '#tableID', mantendo o processamento no mínimo.

Uma alternativa para isso, se você estiver procurando por mais de um elemento dentro de # table1, seria procurar isso separadamente e depois passá-lo para o jQuery, pois isso limita o escopo, mas economiza um pouco de processamento para procurá-lo a cada vez.

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
Resposta um tanto prolífica, mas essa é fundamentalmente a abordagem geral correta.
HoldOffHunger
2
Pode ser um pouco prolixo, mas é melhor ter uma explicação e raciocínio extras por trás de uma sugestão do que uma única linha que explica pouco! ;) É útil quando alguém é novo para algo e tentando entender por que a) ela funciona e b) como ele funciona
Steve Childs
-13

Você pode usar a função:

get.elementbyId();
Pratyush Goyal
fonte
2
O OP queria obter o nome , não o id. E o que é get.elementbyId()? Você quis dizer document.getElementById()?
barbsan
8
Não, ele está pedindo para selecionar um elemento pelo nome.
barbsan