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:

<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

</ul

Select element with multiple attributes

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

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

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"]')

Select element with multiple attributes

Leave a Reply Cancel reply