Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- 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
245 Views
Advertisements