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>

javascript jquery html dom jquery-selectors 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:

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

Expandir snippet

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>

Expandir snippet

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>

Expandir snippet

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>

Expandir snippet

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

13

Eu fiz assim e funciona:

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

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

kscius
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

Como posso selecionar um elemento pelo nome com o jQuery?

Respostas: