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

jQueryWeb DevelopmentFront 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>
raja
Published on 15-Dec-2017 19:46:51
Advertisements