javascript - select name jquery
Como posso selecionar um elemento pelo nome com jQuery? (10)
Tenho uma coluna da tabela que estou tentando expandir e ocultar:
O jQuery parece ocultar os elementos td
quando eu os seleciono por class mas não pelo name do elemento.
Por exemplo, por que:
$(".bold").hide(); // selecting by class works
$("tcol1").hide(); // select by element name does not work
Observe o HTML abaixo, a segunda coluna tem o mesmo nome para todas as linhas. Como eu poderia criar essa coleção usando o atributo 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>
Aqui está uma solução simples: $('td[name=tcol1]')
Qualquer atributo pode ser selecionado usando o método [attribute_name=value]
. Veja o exemplo here :
var value = $("[name='nameofobject']");
Se você tem algo como:
<input type="checkbox" name="mycheckbox" value="11" checked="">
<input type="checkbox" name="mycheckbox" value="12">
Você pode ler tudo assim:
jQuery("input[name='mycheckbox']").each(function() {
console.log( this.value + ":" + this.checked );
});
O trecho:
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">
Você pode obter a matriz de elementos pelo nome à moda antiga e passar essa matriz para 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: a única vez que você teria um motivo para usar o atributo "name" deveria ser para checkbox ou entradas de rádio.
Ou você poderia simplesmente adicionar outra classe aos elementos para seleção (isto é o que eu faria)
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>
Você pode obter o elemento no JQuery usando seu atributo ID como este:
$("#tcol1").hide();
Você pode usar o seletor 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'
Você pode usar qualquer atributo como seletor com [attribute_name=value]
.
$('td[name=tcol1]').hide();
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 é o código que pode ser útil.