如何选择基于属性值

Question

特定TR我得到这个表HTML：

<table id="mytable"> 
<thead> 
<tr role="row"> 
<th aria-controls="dog"></th> 
<th aria-controls="cat"></th> 
<th aria-controls="fish"></th> 
</tr> 
</thead> 
</table> 

，我想选择个地方的属性是“狗”。

我试试这个：

$("th").attr("aria-controls"="dog"); 

什么是神的方式来做到这一点？
如果我可以避免循环所有的tr它会更好。

谢谢:)

Answer 1

您可以选择由什么属性的值等于元素，像这样：

var element = $('th[aria-controls="dog"]') 

的属性

更多信息等于选择在这里：https://api.jquery.com/attribute-equals-selector/

作为一个侧面说明th甚至不是必需的或属性的值来测试。您可以简单地选择具有该属性的所有元素，而不管其值如何：

var element = $('[aria-controls]') 

使用此选择器的方法很多。你甚至可以找到具有该属性的元素开始，结束或包含该值。

始于：var element = $('[aria-controls|="dog"]')例如：dogggg

结尾为：var element = $('[aria-controls$="dog"]')例如：adog

包含：var element = $('[aria-controls*="dog"]')例如：bdogb

不等于：var element = $('[aria-controls!="dog"]')例如：猫

更多信息上属性选择器一般在这里：https://api.jquery.com/category/selectors/attribute-selectors/

Answer 2

问题他们你有：

$("th").attr("aria-controls"="dog"); 

主要是，这是一个语法错误（Uncaught ReferenceError: Invalid left-hand side in assignment）;这是因为attr()方法有两个用途，即获取或设置一个值。

如果您提供一个参数是一个getter，并返回给定属性的值：

$('th').attr('aria-controls'); 

然后将从由$('th') returnd第一/唯一元素返回aria-controls属性的值元素的集合。

要设置到给定值的属性：

$('th').attr('aria-controls', 'aria-controls new value'); 

这将在aria-controls属性的属性值设置为'aria-controls new value'所提供的值（第二个参数的方法）。

您会注意到既没有这两种方法都使用了赋值（=）运算符。

要找到通过其给定属性的元素，以及属性值，你需要使用属性的equals（[attribute=attribute-value]）的CSS选择器语法：

$('th[aria-controls=dog]');