Select element with multiple attributes in jQuery

Selecting element with two or more attributes in your html page is not a trivial task. It’s just a very simple line of jQuery selector when it comes to select element with multiple attributes. So let us see what is that.

HTML

Our page consists of the following html:

HTML element with multiple attributes

0

1

2

3

4

5

6

7

8

9

<ul id="mylist">

<li><ahref="zoom"rel="nature">ItemI</a></li>

<li><ahref="zoom"rel="tech">Item II</a></li>

<li><ahref="zoom"rel="nature">Item III</a></li>

<li><ahref="zoom"rel="art">Item IV</a></li>

<li><ahref="zoom"rel="nature">ItemV</a></li>

<li><ahref="zoom"rel="nature">Item VI</a></li>

<li><ahref="zoom"rel="tech">Item VII</a></li>

</ul

Select element with multiple attributes

So the jQuery selector to select all anchor elements with href="zoom" and rel="nature" attributes would be:

Select element with multiple attributes

0

1

$('a[href="zoom"][rel="nature"]')

Quite simple!! In general we can select element with multiple attributes in jQuery in the following common syntax: