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:
1 2 3 4 5 6 7 8 9 | <ul id="mylist"> <li><a href="zoom" rel="nature">Item I</a></li> <li><a href="zoom" rel="tech">Item II</a></li> <li><a href="zoom" rel="nature">Item III</a></li> <li><a href="zoom" rel="art">Item IV</a></li> <li><a href="zoom" rel="nature">Item V</a></li> <li><a href="zoom" rel="nature">Item VI</a></li> <li><a href="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:
1 | $('a[href="zoom"][rel="nature"]') |
Quite simple!! In general we can select element with multiple attributes in jQuery in the following common syntax:
$('tag[attribute1="value1"][attribute2="value2"]')