¿Cómo puedo seleccionar un elemento por nombre con jQuery?

1227

Tengo una columna de tabla que intento expandir y ocultar:

jQuery parece ocultar los tdelementos cuando lo selecciono por clase pero no por el nombre del elemento .

Por ejemplo, ¿por qué:

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

Tenga en cuenta el HTML a continuación, la segunda columna tiene el mismo nombre para todas las filas. ¿Cómo podría crear esta colección usando el 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
fuente

77

La pregunta no coincide con el contenido. ID y nombre son atributos diferentes y se seleccionan de manera diferente

Mark W

12

Va en contra de los estándares del W3C tener elementos con la misma ID; es decir, los ID duplicados son un no no.

Steve Tauber

2178

Puede usar el selector de atributos 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
fuente

1

Solo por curiosidad, ¿cómo escribiría esto como NO tcol1, como si quisiera ocultar las columnas que no sean las columnas llamadas tcol1?

HPWD

25

@Varun: puede omitir td ... por ejemplo, $ ('[name ^ = tcol]') coincidirá con todos los elementos que tengan un atributo 'name' con un valor que comience con 'tcol'

Jon Erickson

Tuve que usarlo como $ ('td [name = tcol1]'), sin el espacio entre td y [] me devolvió NULL.

akki

@DougMolineux En realidad, está haciendo coincidir el pre- arreglo de un nombre.

mareoraft

77

@HPWD usaría el: not selector, $("td:not([name='tcol1'])")por ejemplo. Puedes verlo en este violín

JohannesB

224

Cualquier atributo se puede seleccionar de [attribute_name=value]manera. Vea la muestra aquí :

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

user2804791
fuente

¡pero debes usar el código anterior para no perderte las preguntas! Buena suerte y bienvenidos a la comunidad de

Stackoverflow

77

Esto no está funcionando, al menos para mí - Pero después de las obras de los estadosvar value = $("[name=nameofobject]");

Pranav

2

Es sorprendente que obtenga 17 votos positivos cuando esto sucedió 4 años después de la respuesta original aceptada

Huangism

66

21 votos a favor ahora ... tal vez sea porque la respuesta es menos confusa que 'td [name = tcol1]', especialmente porque el td no es obligatorio y por lo tanto lleva a personas como yo por el camino equivocado

Chris Sprague

2

Mis nombres de entrada tenían un [] como esto: <input name="itemid[]">. Entonces, esta respuesta funcionó más perfectamente que la respuesta aceptada, gracias al uso apropiado de las comillas.

Sunish Menon

62

Si tienes algo como:

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

Puedes leer todo de esta manera:

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

El fragmento:

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 fragmento

Andreas L.
fuente

26

Puede obtener la matriz de elementos por nombre de la manera antigua y pasar esa matriz 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>

Expandir fragmento

nota: la única vez que tendría una razón para usar el atributo "nombre" debería ser para la casilla de verificación o las entradas de radio.

O simplemente podría agregar otra clase a los elementos para la selección. (Esto es lo que haría)

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 fragmento

Tu amigo ken
fuente

24

Puede obtener el valor del nombre de un campo de entrada utilizando el elemento de nombre en jQuery de la siguiente manera:

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 fragmento

Shrikant D
fuente

+1 El único ejemplo dado que selecciona un campo de nombre que incluye tipo y limita los resultados a una sección de identificación.

SharpC

Estoy de acuerdo. Puede tener múltiples formularios en su página, y restringir al correcto es una buena idea.

Kar.ma

15

Los marcos generalmente usan nombres de paréntesis en formularios, como:

<input name=user[first_name] />

Se puede acceder 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
fuente

13

He hecho así y funciona:

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

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

kscius
fuente

6

Olvidó el segundo conjunto de citas, lo que hace que la respuesta aceptada sea incorrecta:

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

Chris J
fuente

por ejemplo si el nombre del campo es'td[name="nested[fieldName]"]'

depetmcd

Esto es muy cierto. Las versiones más nuevas de jQuery (v. 3.2.1) son mucho más propensas a fallar cuando se encuentra un elemento selector basado en atributos sin una cita adecuada.

HoldOffHunger

5

Aquí hay una solución simple: $('td[name=tcol1]')

Invitado
fuente

3

Puede obtener el elemento en JQuery utilizando su atributo ID de esta manera:

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

CalebHC
fuente

44

Solo coincide con un elemento único

TTT

2

Lo siento por eso. Solo haz lo que dijo Ben S.

CalebHC

Sí, eso es cierto sobre la identificación. En cuanto a la selección por nombre, creo que había una publicación aquí referida a Selectores / atributoEquals que fue útil.

TTT

1

Tal vez la pregunta ha sido editado, pero él está pidiendo referencia de nombre ahora, pero sí los elementos individuales puede utilizar el selector de ID

nckbrz

Pregunta en realidad para el nombre

Prathamesh Más

3

Puede usar cualquier atributo como selector con [attribute_name=value].

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

fuente

3

Personalmente, lo que he hecho en el pasado es darles una identificación de clase común y la usé para seleccionarlos. Puede que no sea ideal ya que tienen una clase especificada que puede no existir, pero hace que la selección sea mucho más fácil. Solo asegúrate de ser único en tus nombres de clase.

es decir, para el ejemplo anterior, usaría su selección por clase. Mejor aún sería cambiar el nombre de la clase de negrita a 'tcol1', para que no obtenga inclusiones accidentales en los resultados de jQuery. Si bold realmente se refiere a una clase CSS, siempre puede especificar ambos en la propiedad de clase, es decir, 'class = "tcol1 bold"'.

En resumen, si no puede seleccionar por Nombre, use un selector jQuery complicado y acepte cualquier golpe de rendimiento relacionado o use selectores de Clase.

Siempre puede limitar el alcance de jQuery incluyendo el nombre de la tabla, es decir, $ ('# tableID> .bold')

Eso debería restringir a jQuery de buscar en el "mundo".

Todavía podría clasificarse como un selector complicado, pero restringe rápidamente cualquier búsqueda dentro de la tabla con el ID de '#tableID', por lo que mantiene el procesamiento al mínimo.

Una alternativa de esto si está buscando más de 1 elemento dentro de # table1 sería buscar esto por separado y luego pasarlo a jQuery ya que esto limita el alcance, pero ahorra un poco de procesamiento para buscarlo 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
fuente

Respuesta un tanto prolija, pero este es fundamentalmente el enfoque general correcto.

HoldOffHunger

2

Puede ser un poco prolijo, ¡pero es mejor tener un poco más de explicación y razonamiento detrás de una sugerencia que una sola línea que explique poco! ;) Es útil cuando alguien es nuevo en algo y trata de entender por qué a) funciona yb) cómo funciona

Steve Childs

-13

Puedes usar la función:

get.elementbyId();

Pratyush Goyal
fuente

2

OP quería obtener su nombre , no su identificación. Y lo que es get.elementbyId()? Quiso decir document.getElementById()?

barbsan

8

No, está pidiendo seleccionar un elemento por su nombre.

barbsan

¿Cómo puedo seleccionar un elemento por nombre con jQuery?

Respuestas: