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

Question

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

Tengo una columna de tabla que estoy tratando de expandir y ocultar:

jQuery parece ocultar el td elementos cuando lo selecciono por clase pero no por el elemento nombre .

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 name ¿atributo?

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

preguntado el 09 de julio de 09 a las 22:07

T.T.T.

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

Va en contra de los estándares del W3C tener elementos con el mismo ID; es decir, las identificaciones duplicadas son un no, no. - Steve Tauber

14 Respuestas

Cualquier atributo se puede seleccionar usando [attribute_name=value] camino. Ver la muestra aquí:

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

Respondido el 23 de diciembre de 14 a las 18:12

user2804791

Si tienes algo como:

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

Puedes leer todo así:

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

Respondido 07 ago 16, 21:08

Andreas L.

Puede obtener la matriz de elementos por nombre a la 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>

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>

Respondido 07 ago 16, 20:08

Your Friend Ken

Puede obtener el valor del nombre de un campo de entrada usando 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>

Respondido 07 ago 16, 21:08

Shrikant D

Marcos usualmente uso nombres de paréntesis en formas, como:

<input name=user[first_name] />

Se puede acceder a ellos mediante:

// 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]\"]")

Respondido 16 Oct 15, 17:10

itsnikolay

He hecho así y funciona:

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

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

respondido 25 mar '15, 21:03

kscius

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

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

respondido 20 nov., 17:19

Chris J

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

Esto es muy cierto. Es mucho más probable que las versiones más nuevas de jQuery (v. 3.2.1) fallen cuando se encuentran con un elemento selector basado en atributos sin las citas adecuadas. - Retener el hambre

Puede obtener el elemento en JQuery usando su atributo ID como este:

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

Respondido 10 Jul 09, 02:07

CalebHC

He aquí una solución sencilla: $('td[name=tcol1]')

Respondido 27 Abr '16, 20:04

Guest

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

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

respondido 31 mar '16, 13:03

community

Personalmente, lo que he hecho en el pasado es darles una identificación de clase común y usarla 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 negrita se refiere realmente a una clase CSS, siempre puede especificar ambas en la propiedad de la clase, es decir, 'class = "tcol1 bold"'.

En resumen, si no puede seleccionar por Nombre, use un selector jQuery complicado y acepte cualquier impacto 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 impedir que jQuery busque 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 a 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); 
}

Respondido el 27 de junio de 18 a las 19:06

Steve Childs

Rendimiento

Hoy (2020.06.16) realizo pruebas para las soluciones elegidas en MacOs High Sierra en Chrome 83.0, Safari 13.1.1 y Firefox 77.0.

Conclusiones

Obtener elementos por nombre

getElementByName (C) es la solución más rápida para todos los navegadores para arreglos grandes y pequeños; sin embargo, probablemente sea algún tipo de solución de carga diferida o use algún hash-caché interno del navegador con pares de nombre y elemento
La solución mixta js-jquery (B) es más rápida que querySelectorAll (D) solución
La solución de jquery pura (A) es la más lenta

Obtenga filas por nombre y ocúltelas (excluimos la solución nativa precalculada (I), teóricamente la más rápida) de la comparación; se usa como referencia)

sorprendentemente, la solución mixta js-jquery (F) es la más rápida en todos los navegadores
sorprendentemente, la solución precalculada (I) es más lenta que las soluciones jquery (E, F) para tablas grandes (!!!) - Verifico que .hide () método jQuery establece el estilo "default:none" en elementos ocultos, pero parece que encuentran una forma más rápida de hacerlo que element.style.display='none'
La solución jquery (E) es bastante rápida en tablas grandes
Las soluciones jquery (E) y querySelectorAll (H) son las más lentas para tablas pequeñas
Las soluciones getElementByName (G) y querySelectorAll (H) son bastante lentas para tablas grandes

Detalles

Realizo dos pruebas para leer elementos por nombre (A,B,C,D) y ocultar esos elementos (E, F, G, H, I)

mesa pequeña - 3 filas - puede ejecutar la prueba AQUÍ
tabla grande - 1000 filas - puede ejecutar la prueba AQUÍ

El fragmento a continuación presenta los códigos usados

//https://stackoverflow.com/questions/1107220/how-can-i-select-an-element-by-name-with-jquery#

// https://jsbench.me/o6kbhyyvib/1
// https://jsbench.me/2fkbi9rirv/1

function A() {
  return $('[name=tcol1]');
}

function B() {
  return $(document.getElementsByName("tcol1"))
}

function C() {
  return document.getElementsByName("tcol1")
}

function D() {
  return document.querySelectorAll('[name=tcol1]')
}

function E() {
  $('[name=tcol1]').hide();
}

function F() {
  $(document.getElementsByName("tcol1")).hide();
}

function G() {
  document.getElementsByName("tcol1").forEach(e=>e.style.display='none'); 
}

function H() {
  document.querySelectorAll('[name=tcol1]').forEach(e=>e.style.display='none'); 
}

function I() {
  let elArr = [...document.getElementsByName("tcol1")];
  let length = elArr.length
  for(let i=0; i<length; i++) elArr[i].style.display='none';
}




// -----------
// TEST
// -----------

function reset() { $('td[name=tcol1]').show(); } 

[A,B,C,D].forEach(f=> console.log(`${f.name} rows: ${f().length}`)) ;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div>This snippet only presents used codes</div>
<table>
  <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>
</table>

<button onclick="E()">E: hide</button>
<button onclick="F()">F: hide</button>
<button onclick="G()">G: hide</button>
<button onclick="H()">H: hide</button>
<button onclick="I()">I: hide</button><br>
<button onclick="reset()">reset</button>

Resultados de ejemplo en Chrome

Respondido el 20 de junio de 20 a las 10:06

Kamil Kiełczewski

Puede utilizar la función:

get.elementbyId();

Respondido el 19 de junio de 19 a las 08:06

Pratyush Goyal

OP quería conseguir por nombre, no id. Y lo que es get.elementbyId()? Querías decir document.getElementById()? - barbasan

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

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas javascript jquery html dom jquery-selectors or haz tu propia pregunta.

La pregunta no coincide con el contenido. El ID y el nombre son atributos diferentes y se seleccionan de manera diferente: Mark W
Va en contra de los estándares del W3C tener elementos con el mismo ID; es decir, las identificaciones duplicadas son un no, no. - Steve Tauber

Jon Erickson · Accepted Answer

2349

Puede utilizar el selector de atributos de 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'

Respondido 01 Oct 19, 23:10

Jon Erickson

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