jQuery selectors on custom data attributes using HTML5

Jose3d picture Jose3d · Nov 10, 2010 · Viewed 651k times · Source

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...".

Answer

John Hartsock picture John Hartsock · Nov 10, 2010
$("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