JQuery Find Element with Data Attribute

Jquery Attribute SelectorJquery Attribute Selector

JQuery Find Element with Data Attribute

Jquery selector attribute filter is another way to select HTML elements. Jquery selector attribute filter are used to filter the results of a selector statement on the bases of attribute content. It is one of the methods of selecting HTML elements with the help of Jquery. We have already discussed that how to select elements with Jquery selectors and with Jquery filters selectors. Let us see a list of different Jquery attribute filter selectors with explanation.

Jquery Attribute Selector

Jquery Attribute Selector

Jquery attribute filter Explanation
[attribute] It will select all the elements that have this attribute
[attribute=value] It will select all the elements that have this attribute and equal to this value
[attribute!=value] It will select all the elements that have this attribute and not equal to this value
[attribute^=value] It will select all the elements that have this attribute and this attribute starts with this specified value
[attribute$=value] It will select all the elements which have the specified attribute and its value ends with this specified value
[attribute*=value] It will select all the elements with this specified attribute and it contains a value equal to this specified value
[attrFilter1][attrFilterN] It selects all the elements that match all of the specified attribute filters

Now let us see some examples of the above mentioned Jquery selector attribute filter.

Jquery selector attribute filter code example:

<!DOCTYPE html >

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>

<title>Untitled Document</title>

<script>

$(document).ready(function(e) {

“//Jquery code goes here

});

</script>

</head>

<body>

<p class=”para1″>First Paragraph</p>

<div id=”element_div”>Third div with class just_element</div>

<ol id=”list-id”>

<li>first element</li>

<li class=”just_element”>second element with class just_element</li>

<li>third element</li>

<li class=”just_element”>fourth element</li>

</ol>

<p class=”a”>Last div</p>

<p class=”b”>para with class b</p>

<p class=”para3″ lang=”en-us” >Last p</p>

</body>

</html>

Note: you can copy the code above and replace the “//Jquery code goes here” string in the document.ready function with the following code to understand the Jquery filters selectors.

$("p[class]").css("border", "2px dotted red");

It will select all the <p> tags that have class attribute in the above code.

$("div[id=element_div]").css("border", "1px dashed red");

It will select the <div> tags that have the id=element_div in the above code example there is just one div.

$("p[class^=para]").css("border", "1px dashed red");

In the above code we are going to put border around all the <p> tags with a class attribute and its value starting with para. In the above example it is the first and last paragraph.

$("p[class^=para][lang*=en-]").css("border", "1px dashed red");

It will select all the <p> tags with class attribute starting with para and having a lang attribute with value starting with en-. In the above example it is the last <p> tag.

$("p[class!=para1]").css("border", "1px dashed red");

It will select all the <p> tags except for the <p> tag having class equal to para1.

How to use jQuery

Comments