How to use jQuery selectors on custom data attributes using HTML5?

jQuery Web Development Front End Technology

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:

Live Demo

<!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>

Amit D

Published on 15-Dec-2017 19:46:51

Previous Page Print Page