关于javascript：如何用jquery按名称选择元素？

How can I select an element by name with jQuery?

有一个我正试图展开和隐藏的表列：

jquery在我按类而不是按元素的名称选择它时，似乎隐藏了td元素。

例如，为什么：

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

注意下面的HTML，第二列的所有行都具有相同的名称。如何使用name属性创建此集合？

1
2
3
4
5
6
7
8
9
10
11
12

相关讨论

可以使用属性选择器：

1
2
3
4
5
6
7

$('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]方式选择任何属性。请参见以下示例：

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

相关讨论

如果你有类似的东西：

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

你可以这样阅读：

1
2
3

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

片段：

1
2
3

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

1
2
3

您可以按传统的方式命名元素数组，并将该数组传递给jquery。

1
2
3
4

function toggleByName() {
var arrChkBox = document.getElementsByName("chName");
$(arrChkBox).toggle();
}

1
2
3
4
5
6
7
8
9
10
11
12
13

注意：您唯一有理由使用"name"属性的时间应该是复选框或无线电输入。

或者你可以在元素中添加另一个类来进行选择(这是我要做的)。

1
2
3
4
5
6
7

function toggleByClass(bolShow) {
if (bolShow) {
$(".rowToToggle").show();
} else {
$(".rowToToggle").hide();
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在jquery中，可以通过以下方式使用name元素从输入字段中获取name值：

1
2
3
4

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);

1
2
3
4
5

相关讨论

框架通常在形式中使用括号名称，例如：

1	<input name=user[first_name] />

它们可以通过以下方式访问：

1
2
3
4
5
6
7
8

// 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]"]")

我已经这样做了，而且它是有效的：

1	$('[name="tcol1"]')

https://api.jquery.com/attribute-equals-selector/

相关讨论

这里有一个简单的解决方案：$('td[name=tcol1]')。

您忘记了第二组引号，这使得接受的答案不正确：

1	$('td[name="tcol1"]')

相关讨论

您可以使用任何属性作为带有[attribute_name=value]的选择器。

1	$('td[name=tcol1]').hide();

就我个人而言，我过去所做的就是给他们一个公共的类ID，并用它来选择它们。它可能并不理想，因为它们指定了一个可能不存在的类，但是它使选择变得非常容易。只要确保你的类名是唯一的。

也就是说，对于上面的示例，我将按类使用您的选择。更好的方法是将类名从粗体改为"tcol1"，这样就不会在jquery结果中意外包含任何内容。如果粗体确实引用了CSS类，则可以始终在Class属性中同时指定这两个属性，即"class="tcol1-bold""。

总之，如果不能按名称选择，可以使用复杂的jquery选择器并接受任何相关的性能命中，也可以使用类选择器。

您总是可以通过包含表名来限制jquery范围，即$('tableid>.bold')

这将限制jquery搜索"世界"。

它仍然可以被归类为一个复杂的选择器，但是它可以快速地将任何搜索约束到ID为"table id"的表中，从而将处理保持在最低限度。

如果您在table1中查找的元素不止一个，那么另一种选择是单独查找这个元素，然后将其传递给jquery，因为这限制了作用域，但每次查找都会节省一些处理。

1
2
3
4
5
6
7

var tbl = $('#tableID');
var boldElements = $('.bold',tbl);
var rows = $('tr',tbl);
if (rows.length) {
var row1 = rows[0];
var firstRowCells = $('td',row1);
}

相关讨论

1
2
3
4

function toggleByName() {
var arrChkBox = document.getElementsByName("chName");
$(arrChkBox).toggle();
}

1
2
3
4
5
6
7
8
9
10
11
12
13

相关讨论

通过使用jquery的id属性，可以在jquery中获取元素，如下所示：

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

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

这是有帮助的代码。

相关讨论