78

With jQuery, it is easy to select elements with a given attribute value.

For example:

var elements = $('div[attr1="value1"]');

But how do I select on multiple attributes (e.g., attr1 = value1 and attr2 = value2)?

2

6 Answers 6

115

Since jquery uses CSS selectors, as defined by the CSS specification a selector with multiple conditions will look like:

$('div[attr1="value1"][attr2="value2"]')

see the CSS spec for further reference: http://www.w3.org/TR/CSS2/selector.html#matching-attrs

5
  • 2
    @JitendraPancholi: where exactly did you get that idea? I cited the exact place in the documentation that supports my statement. If you are going to refute what I said (and vote me down), I would at least expect a courtesy of a reference to something official.
    – Dmitry B.
    Apr 2, 2018 at 22:36
  • 1
    I tried your code in my project and found it not working. I did it practically and don't have any other reference. Apr 4, 2018 at 10:33
  • $('div[attr1="value1"]').filter('div[attr2="value2"]'); this code works like charm. Apr 4, 2018 at 10:33
  • 4
    @JitendraPancholi: So in 7 years, 31,000 views and 59 upvotes, you are the first one to say this answer is wrong. Can you explain?
    – Dmitry B.
    Apr 4, 2018 at 22:52
  • 1
    jQuery documentation says clearly "Matches elements that match all of the specified attribute filters" so yes it is an AND and not an OR and this is the correct answer. api.jquery.com/multiple-attribute-selector Jun 30, 2020 at 15:53
22

You could for example chain and filter like so

var elements = $('div[attr1="value1"]').filter('div[attr2="value2"]');
0
16

Find this solution quite simple.

$('[attr1="home"][attr2="settings"]')
2
  • @DanielLiuzzi above is correct for performing AND
    – Geek
    Jun 15, 2021 at 19:22
  • @Geek It wasn't correct when I added my comment. Seeing that the answer has since been edited and fixed, I'll delete the comment to avoid any confusion. Jun 21, 2021 at 21:19
0

To select multiple attributes, see the code below.

This code will find all inputs that have an id attribute and whose name attribute ends with 'man' and sets the value.

$( "input[id][name$='man']" ).val( "this input has id and name ends with 'man'" );
0

You can even target an element like so:

const elem = $('.className[type="checkbox"][name="someName"]')

or in more dynamic way with a parameter:

const elem = $('.elemClassName_'+$(this).data('id')+'[type="checkbox"][name="someName"]')

I use the last example to target a checkbox when an input value changes. The above is from many examples, and they work for me.

0

if you use with space it takes child

$("#a .b")  = <div id="a"><div class="b">..

If you use without space it take same object with 2 class

$("#a.b")  = <div id="a" class="b">..

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.