javascript - selectores - selector for attribute jquery
¿Cómo puedo seleccionar un elemento por nombre con jQuery? (14)
Aquí hay una solución simple: $(''td[name=tcol1]'')
Tener una columna de tabla que estoy tratando de expandir y ocultar:
jQuery parece ocultar los elementos td cuando lo selecciono por class pero no por el name del elemento.
Por ejemplo, ¿por qué hace:
$(".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 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>
Cualquier atributo se puede seleccionar usando la forma [attribute_name=value] . Vea la muestra here :
var value = $("[name=''nameofobject'']");
Olvidó el segundo conjunto de citas, lo que hace que la respuesta aceptada sea incorrecta:
$(''td[name="tcol1"]'')
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 lo ideal, ya que tienen una clase específica que puede no existir, pero hace que la selección sea mucho más fácil. Solo asegúrate de que eres ú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 ninguna inclusión accidental en los resultados de jQuery. Si negrita realmente hace referencia a una clase CSS, siempre puede especificar ambas en la propiedad de clase, es decir, ''class = "tcol1 bold"''.
En resumen, si no puede seleccionar por Nombre, use un selector de jQuery complicado y acepte cualquier impacto de rendimiento relacionado o use los 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 el "mundo".
Aún podría ser clasificado como un selector complicado, pero rápidamente restringe 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 busca 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);
}
Puede obtener el elemento en JQuery utilizando su atributo de ID como este:
$("#tcol1").hide();
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>
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: la única vez que tenga una razón para usar el atributo "nombre" debe 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 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>
Puede usar cualquier atributo como selector con [attribute_name=value] .
$(''td[name=tcol1]'').hide();
Puede utilizar el selector de attribute :
$(''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''
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">
Los marcos generalmente usan nombres de corchetes en formas, como:
<input name=user[first_name] />
Se puede acceder a ellos 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]/"]")
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="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>
<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 el código que puede ser útil.