我怎样才能select一个名称与jQuery元素？
有一个表列我试图扩大和隐藏：
jQuery似乎隐藏的td元素，当我按类而不是元素名称select它。
例如，为什么：
$(".bold").hide(); // selecting by class works $("tcol1").hide(); // select by element name does not work 注意下面的HTML，第二列对所有行都有相同的名字。 我如何使用name属性创build这个集合？
<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>
你可以使用属性select器
$('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'
任何属性都可以使用[attribute_name=value]方式进行select。 在这里看到示例：
var value = $("[name='nameofobject']");
如果你有这样的东西：
<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">
你可以通过老式的名字获取元素数组，并将数组传递给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>
您可以使用jQuery中的名称元素从input字段获取名称值：
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>
框架通常在表单中使用括号名称 ，如：
<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]\"]")
这里有一个简单的解决scheme： $('td[name=tcol1]')
您可以使用任何属性作为[attribute_name=value]select器。
$('td[name=tcol1]').hide();
你可以通过使用它的ID属性来获取JQuery中的元素：
$("#tcol1").hide();
就我个人而言，过去我所做的是给他们一个普通的class级ID，并用它来select它们。 它可能并不理想，因为他们有一个指定的类可能不存在，但它使select地狱更容易。 只要确保你的名字是独一无二的。
即上面的例子，我会用你的select。 更好的办法是将类名从粗体改为“tcol1”，所以不会在jQuery结果中包含任何意外的内容。 如果粗体确实引用了一个css类，那么你可以在类属性中指定 – 即'class =“tcol1 bold”'。
总之，你不能按名称select，要么使用复杂的JQueryselect器，并接受任何相关的性能命中或使用类select器。
你总是可以通过包含表名即ie限制JQuery范围
$('#tableID > .bold')
这应该限制JQuerysearch“世界”。
它仍然可以被归类为一个复杂的select器，但是它快速地限制了在表格内用'#tableID'的ID进行search，所以把处理保持在最低限度。
如果你在＃table1中寻找1个以上的元素，另一种方法是单独查看这个元素，然后把它传递给JQuery，因为这会限制范围，但是每次都会保存一些处理来查找它。
var tbl = $('#tableID'); var boldElements = $('.bold',tbl); var rows = $('tr',tbl); if (rows.length) { var row1 = rows[0]; var firstRowCells = $('td',row1); }
要隐藏名称为“tcol1”的所有td
$('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>
这是可以帮助的代码。
