T.T*_*.T. 1160 html javascript jquery dom jquery-selectors
有一个表格列我正在尝试展开和隐藏:
td当我按类而不是按元素名称选择它时,jQuery似乎隐藏了元素.
例如,为什么:
$(".bold").hide(); // selecting by class works
$("tcol1").hide(); // select by element name does not work
请注意下面的HTML,第二列对所有行都具有相同的名称.我怎么能用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>
Jon*_*son 2075
您可以使用属性选择器:
$('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'
小智 211
可以使用[attribute_name=value]方式选择任何属性.看这里的样本:
var value = $("[name='nameofobject']");
And*_* L. 57
如果你有类似的东西:
<input type="checkbox" name="mycheckbox" value="11" checked="">
<input type="checkbox" name="mycheckbox" value="12">
你可以这样读:
jQuery("input[name='mycheckbox']").each(function() {
console.log( this.value + ":" + this.checked );
});
片段:
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">You*_*Ken 25
你可以按照老式的方式获取元素数组,并将该数组传递给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>注意:您有理由使用"name"属性的唯一一次应该是复选框或无线电输入.
或者你可以在元素中添加另一个类进行选择.(这就是我要做的)
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>Shr*_*t D 23
您可以使用jQuery中的name元素从输入字段获取名称值:
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>its*_*lay 15
框架通常在表单中使用括号名称,例如:
<input name=user[first_name] />
可通过以下方式访问它们:
// 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]\"]")
ksc*_*ius 13
我这样做了,它的工作原理:
$('[name="tcol1"]')
https://api.jquery.com/attribute-equals-selector/
小智 5
您可以使用任何属性作为选择器[attribute_name=value]。
$('td[name=tcol1]').hide();