¿Cómo seleccionar un artículo por nombre usando jQuery?

Tengo una columna de tabla que trato de expandir y ocultar:

Parece que jQuery oculta elementos td cuando lo selecciono por clase, pero no por nombre de elemento.

Por ejemplo, por qué:

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

Observe el HTML a continuación, la segunda columna tiene el mismo nombre para todas las filas. ¿Cómo puedo crear esta colección usando el atributo de name ?

 <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> 
967
10 июля '09 в 4:05 2009-07-10 04:05 TTT se establece el 10 de julio de 2009 a las 4:05 2009-07-10 04:05
@ 15 respuestas

Puede utilizar el selector de atributos :

 $('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' 
1811
10 июля '09 в 4:21 2009-07-10 04:21 La respuesta es dada por Jon Erickson el 10 de julio de 2009 a las 4:21 2009-07-10 04:21

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

border=0
 var value = $("[name='nameofobject']"); 
168
22 сент. La respuesta es dada por user2804791 22 de septiembre 2013-09-22 22:07 '13 a las 10:07 pm 2013-09-22 22:07

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 ); }); 

Extracto:

 <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"> 
52
09 июля '14 в 21:34 2014-07-09 21:34 La respuesta la da Andreas L. 09 de julio de 2014 a las 21:34 2014-07-09 21:34

Puede obtener una matriz de elementos por el nombre de la forma antigua y pasar esta matriz a jQuery.

 <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 tenga una razón para usar el atributo "nombre" debe estar marcada o las entradas de radio.

O simplemente puede agregar otra clase a los elementos para seleccionar. (Esto es lo que yo haría)

 <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> 
22
11 июля '09 в 8:25 2009-07-11 08:25 La respuesta la da tu amigo Ken el 11 de julio de 2009 a las 8:25 2009-07-11 08:25

Puede obtener el valor del nombre del campo de entrada usando el elemento name en jQuery:

 <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> 
18
15 июня '15 в 8:52 2015-06-15 08:52 Shrikant D da la respuesta el 15 de junio de 15 a las 8:52 AM 2015-06-15 08:52

Los marcos usualmente usan corchetes en las formas, por ejemplo:

 <input name=user[first_name] /> 

Puedes acceder a ellos:

 // 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]\"]") 
14
16 окт. La respuesta está dada por itsnikolay 16 de octubre. 2015-10-16 19:27 '15 a las 19:27 2015-10-16 19:27

Lo hice y funciona.

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

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

12
25 марта '15 в 23:27 2015-03-25 23:27 kscius da la respuesta el 25 de marzo de 2015 a las 23:27 2015-03-25 23:27

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

5
27 апр. Respuesta de invitado el 27 de abr. 2016-04-27 21:47 '16 a las 9:47 pm 2016-04-27 21:47

Personalmente, lo que hice en el pasado es darles un identificador de clase común y usarlo para seleccionarlos. Esto puede no ser ideal, porque tienen una cierta clase que puede no existir, pero hace que la elección sea mucho más fácil. Solo asegúrate de ser único en tus clases.

es decir, para el ejemplo anterior, usaría su elección por clase. Sería mejor cambiar el nombre de la clase de negrita a "tcol1", para que no obtenga ninguna inclusión aleatoria en los resultados de jQuery. Si el tipo en negrita pertenece realmente a la clase CSS, siempre puede especificar como en la propiedad de clase, es decir, "class =" tcol1 negrita ".

Por lo tanto, si no puede seleccionar por nombre, use el selector de jQuery complejo o acepte cualquier impacto de rendimiento asociado o use los selectores de clase.

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

Esto debería limitar jQuery a la búsqueda de "paz".

Todavía se puede clasificar como un selector complejo, pero rápidamente restringe cualquier búsqueda en la tabla con el identificador "#IDIDID", por lo tanto minimiza.

Una alternativa a esto, si está buscando más de un elemento en # table1, lo vería por separado y luego lo pasaría a jQuery, porque limita el alcance, pero mantiene el bit de procesamiento para verlo cada vez.

 var tbl = $('#tableID'); var boldElements = $('.bold',tbl); var rows = $('tr',tbl); if (rows.length) { var row1 = rows[0]; var firstRowCells = $('td',row1); } 
3
23 февр. Steve Childs publicado el 23 de febrero 2015-02-23 15:16 '15 a las 15:16 2015-02-23 15:16

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

 $('td[name=tcol1]').hide(); 
3
31 марта '16 в 15:51 2016-03-31 15:51 la respuesta está dada por el usuario6139189 31 de marzo de 2016 a las 15:51 2016-03-31 15:51

Puede obtener un artículo en jQuery usando su atributo ID, por ejemplo:

 $("#tcol1").hide(); 
2
10 июля '09 в 4:09 2009-07-10 04:09 La respuesta la da CalebHC el 10 de julio de 2009 a las 4:09 2009-07-10 04:09

 <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="text" name="chName"/><br /> <input type="text" name="chName"/><br /> <input type="text" name="chName"/><br /> <input type="text" name="chName"/><br /> <input type="button" onclick="toggleByName();" value="toggle"/> </body> </html> 
2
12 авг. La respuesta se da sumith deepan 12 ago. 2017-08-12 09:41 '17 a las 9:41 am 2017-08-12 09:41

Ha olvidado el segundo conjunto de citas, lo que hace que la respuesta aceptada sea incorrecta:

 $('td[name="tcol1"]') 
2
20 нояб. La respuesta es dada por Chris J el 20 de noviembre. 2017-11-20 22:27 '17 a las 10:27 pm 2017-11-20 22:27

Para ocultar todo td con el nombre "tcol1"

 $('td[name=tcol1]').hide() 
0
07 июля '16 в 12:49 2016-07-07 12:49 la respuesta se da aditya mukkawar 07 de julio de 2016 a las 12:49 2016-07-07 12:49
 <script src="jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var a= $("td[name=tcol3]").html(); alert(a); }); </script> <table border="3"> <tr> <td>data1</td> <td name="tcol1" class="bold"> data2tcol1</td> </tr> <tr> <td>data1</td> <td name="tcol2" class="bold"> data2tcol2</td> </tr> <tr> <td>data1</td> <td name="tcol3" class="bold"> data2tcol3</td> </tr> </table> 

Este es un código que puede ser útil.

-3
29 дек. La respuesta es dada por Anuragjainsagar 29 de diciembre. 2014-12-29 23:48 '15 a las 11:48 p.m. 2014-12-29 23:48

Otras preguntas sobre etiquetas o Haga una pregunta