Question

我选择具有相同属性的DOM元素，但使用jQuery选择两个不同的值：

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

有更高效或更紧凑的方法吗？

请记住，有许多可能的值，但我只是在这种情况下搜索两个特定的值。

谢谢：）

Answer 1

只需使用该属性，就像这样

$( 'input[the-attribute]' )

注意，如果您测试的值不是以相同的字符开头，例如样本3，那么它们需要作为列表添加，确切地说如何添加，或者按照建议/评论添加指定

的特定类别

在此处阅读有关属性选择器的更多信息：MDN Attribute selectors

样本1，具有属性[the-attribute]

的目标元素

＆＃13;

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

＆＃13;

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

＆＃13;

样本2，具有2（或更多）属性[the-attribute][the-attribute2]

的目标元素

＆＃13;

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

＆＃13;

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

＆＃13;

示例3，属性值以宽度开头的目标元素 [data-size^=width]

＆＃13;

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

＆＃13;

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

＆＃13;

示例4，属性值包含值的目标元素 [data-size*=width]

＆＃13;

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

＆＃13;

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

＆＃13;

多个属性值jQuery

1 个答案: