如何選擇基於屬性值

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