如何使用jQuery按名称选择元素？

最新推荐文章于 2023-03-22 11:06:04 发布

asdfgh0077

最新推荐文章于 2023-03-22 11:06:04 发布

阅读量489

点赞数

文章标签： javascript jquery html dom jquery-selectors

原文链接：https://oldbug.net/q/4e2O/How-can-I-select-an-element-by-name-with-jQuery

版权

本文翻译自：How can I select an element by name with jQuery?

Have a table column I'm trying to expand and hide: 有一个表格列我正在尝试展开和隐藏：

jQuery seems to hide the td elements when I select it by class but not by element's name . 当我按类而不是按元素名称选择时，jQuery似乎隐藏了td元素。

For example, why does: 例如，为什么：

$(".bold").hide(); // selecting by class works
$("tcol1").hide(); // select by element name does not work

Note the HTML below, the second column has the same name for all rows. 请注意下面的HTML，第二列对所有行都具有相同的名称。 How could I create this collection using the name attribute? 如何使用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>

#1楼

参考：https://stackoom.com/question/4e2O/如何使用jQuery按名称选择元素

#2楼

你可以使用它的ID属性在JQuery中获取元素，如下所示：

$("#tcol1").hide();

#3楼

You can use the attribute 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'

#4楼

You could get the array of elements by name the old fashioned way and pass that array to jQuery. 你可以按照老式的方式获取元素数组，并将该数组传递给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>

note: the only time you would have a reason to use the "name" attribute should be for checkbox or radio inputs. 注意：您有理由使用“name”属性的唯一一次应该是复选框或无线电输入。

Or you could just add another class to the elements for selection.(This is what I would do) 或者你可以在元素中添加另一个类进行选择。（这就是我要做的）

 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>

#5楼

Any attribute can be selected using [attribute_name=value] way. 可以使用[attribute_name=value]方式选择任何属性。 See the sample here : 看这里的样本：

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

#6楼

If you have something like: 如果你有类似的东西：

<input type="checkbox" name="mycheckbox" value="11" checked="">
<input type="checkbox" name="mycheckbox" value="12">

You can read all like this: 你可以这样读：

jQuery("input[name='mycheckbox']").each(function() {
    console.log( this.value + ":" + this.checked );
});

The snippet: 片段：

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

asdfgh0077

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用jQuery按名称选择元素？

Have a table column I'm trying to expand and hide: 有一个表格列我正在尝试展开和隐藏： jQuery seems to hide the td
复制链接

扫一扫