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


Tengo una columna de tabla que intento expandir y ocultar:

jQuery parece ocultar el td elementos cuando lo selecciono por clase pero no por 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 siguiente HTML, 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>

959
2017-07-10 01:05


origen


Respuestas:


Puedes usar el atributo selector:

$('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'

1801
2017-07-10 01:21



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

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

168
2017-09-22 19:07



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


51
2017-07-09 18:34



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

nota: el único momento en que tendría una razón para usar el atributo "nombre" debería ser para casilla de verificación o entradas de radio.

O simplemente podría agregar otra clase a los elementos para la selección. (Esto es lo que yo 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>


22
2017-07-11 05:25



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


18
2018-06-15 05:52



Frameworks usualmente uso nombres de corchetes en formas, 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]\"]")

13
2017-10-16 16:27



He hecho esto y funciona:

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

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


12
2018-03-25 20:27



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


5
2018-04-27 18:47



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

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

3
2018-03-31 12:51



Personalmente, lo que hice en el pasado es darles una identificación de clase común y usar eso para seleccionarlos. Puede que no sea lo ideal ya que tienen una clase especificada que puede no existir, pero hace que la selección sea muchísimo 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', por lo que no se incluyen inclusiones accidentales en los resultados de jQuery. Si bold se refiere realmente a una clase CSS, siempre puede especificar ambos en la propiedad de la clase, es decir, 'class = "tcol1 bold"'.

En resumen, si no puede seleccionar por nombre, utilice un selector de jQuery complicado y acepte cualquier resultado 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 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 la 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 guarda 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); 
}

3
2018-02-23 12:16