- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use jQuery selectors on custom data attributes using HTML5?
To use jQuery selectors on custom data attributes, you can use contains, starts with, and ends with for the HTML data attributes.
Example
Other than that, you can try to run the following code to learn how to use jQuery selectors on custom data attributes using HTML5:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
//stored selector
var group = $('ol[data-group="Subjects"]');
// starts with M
var maths = $('[data-subject^="M"]',group).css('color','green');
// contains the string graph
var graph = $('[data-subject*="graph"]',group).css('color','blue');
});
</script>
</head>
<body>
<ol data-group="Subjects">
<li data-subject="Maths">Maths</li>
<li data-subject="Science">Science</li>
<li data-subject="Geography">Geography</li>
<li data-subject="History">History</li>
</ol>
</body>
</html>
Updated on 18-Dec-2019 08:16:25
- Related Questions & Answers
- Creating custom attributes with HTML5
- How to use JavaScript variables in jQuery selectors?
- How do we embed custom data attributes on all HTML elements?
- How to use OR Operation in jQuery Attribute Selectors?
- Store and retrieve arrays into and from HTML5 data attributes with jQuery?
- How to remove all style attributes using jQuery?
- How to filter object array based on attributes in jQuery?
- What are jQuery Selectors?
- HTML5 Microdata Attributes
- How to construct custom attributes in C#?
- How to create custom attributes in C#?
- Using Data-Attributes (data-*) in CSS
- How does CSS Selectors work in jQuery?
- WebSockets Attributes in HTML5
- How to handle HTML5 media events using jQuery?
Advertisements