多個屬性值的jQuery

Question

我選擇DOM元素具有相同的屬性，但使用jQuery的兩個不同的值：

$('input[the-attribute="value1"], input[the-attribute="value2"]') 

是否有更有效或緊湊的方式做到這一點？

請記住，有很多可能的值，但我只是在這種情況下尋找兩個具體的值。

謝謝:)

Answer 1

樣品3中只需使用屬性，這樣

$('input[the-attribute]') 

注意，如果你測試的值不相同的字符開始一樣，那麼他們就需要將其作爲列表添加，或者按照建議/評論的方式添加特定類到目標對象

有關屬性選擇器的更多信息，請參閱：MDN Attribute selectors

---

樣品1，具有具有2（或更多）屬性[the-attribute][the-attribute2]

$('div[data-color][data-image]').css("color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div>Hey 1</div> 
 
<div data-color="green">Hey 2</div> 
 
<div data-color="blue" data-image="icon">Hey 3</div> 
 
<div>Hey 4</div>

屬性 [the-attribute]

$('div[data-color]').css("color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div>Hey 1</div> 
 
<div data-color="green">Hey 2</div> 
 
<div data-color="blue">Hey 3</div> 
 
<div>Hey 4</div>

樣品2，目標元素目標元素210

樣品3，目標元素，其中該屬性的值開始於寬度[data-size^=width]

$('div[data-size^=width]').css("color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div>Hey 1</div> 
 
<div data-size="width200">Hey 2</div> 
 
<div data-size="width400">Hey 3</div> 
 
<div>Hey 4</div>

樣品4，靶元素，其中該屬性的值包含值[data-size*=width]

$('div[data-size*=width]').css("color", "red");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div>Hey 1</div> 
 
<div data-size="height100width200">Hey 2</div> 
 
<div data-size="length300width400">Hey 3</div> 
 
<div>Hey 4</div>