Multiple attribute values jQuery

Question

I'm selecting DOM elements with the same attribute, but two different values using jQuery:

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

Is there a more efficient or compact way to do this?

Please, bear in mind that there are many possible values, but I'm just searching for two specific values in this case.

Thanks :)

Do the attribute values start with the same string? In the above example you could do: $('input[the-attribute^="value"]) — api.jquery.com/attribute-starts-with-selector — James Hibbard
– James Hibbard, Commented Mar 5, 2017 at 11:23

Asons · Accepted Answer · 2017-03-06 05:53:24Z

2

Just use the attribute, like this

$( 'input[the-attribute]' )

Note, if the values you test on does not start with the same characters, like in sample 3, then they need to be added as a list, exactly how you do already, or as suggested/commented, add a specific class to the one's to target

Read more here about attribute selectors: MDN Attribute selectors

Sample 1, target elements having the attribute [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>

Sample 2, target elements having 2 (or more) attribute [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>

Sample 3, target elements where the attribute's value starts with width [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>

Sample 4, target elements where the attribute's value contains the value [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>

edited Mar 6, 2017 at 5:53

answered Mar 5, 2017 at 11:26

Asons

87.7k12 gold badges119 silver badges175 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

tiomno Over a year ago

I didn't down vote you, but I'll say that this is not a good solution in my case as there are a lot more elements with the same attribute. Here I'm just searching for two specific values, but there are a lot more values. Thanks anyway. :) Adding that extra info the question.

James Hibbard Over a year ago

@timo can you update your question then with the actual values you are trying to select by.

tiomno Over a year ago

@JackZelig a real example is 'input[data-col="height"], input[data-col="width"]' but I guess the example in the question is juts fine to get the idea.

James Hibbard Over a year ago

Ok man, then as far as I know either select using the "data-col" attribute as suggested, or do it as you are in your question. There is no shorter way AFAIK.

Asons Over a year ago

@JackZelig Updated answer

|

Collectives™ on Stack Overflow

Multiple attribute values jQuery

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related