Javascript – jQuery selectors on custom data attributes using HTML5

custom-data-attributejavascriptjqueryjquery-selectors

I would like to know what selectors are available for these data attributes that come with HTML5.

Taking this piece of HTML as an example:

<ul data-group="Companies">
  <li data-company="Microsoft"></li>
  <li data-company="Google"></li>
  <li data-company ="Facebook"></li>
</ul>

Are there selectors to get:

  • All elements with data-company="Microsoft" below "Companies"
  • All elements with data-company!="Microsoft" below "Companies"
  • In other cases is it possible to use other selectors like "contains, less than, greater than, etc…".

Best Answer

$("ul[data-group='Companies'] li[data-company='Microsoft']") //Get all elements with data-company="Microsoft" below "Companies"

$("ul[data-group='Companies'] li:not([data-company='Microsoft'])") //get all elements with data-company!="Microsoft" below "Companies"

Look in to jQuery Selectors :contains is a selector

here is info on the :contains selector