jQuery selectors on custom data attributes using HTML5
$("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
jQuery UI
has a :data()
selector which can also be used. It has been around since Version 1.7.0 it seems.
You can use it like this:
Get all elements with a data-company
attribute
var companyElements = $("ul:data(group) li:data(company)");
Get all elements where data-company
equals Microsoft
var microsoft = $("ul:data(group) li:data(company)") .filter(function () { return $(this).data("company") == "Microsoft"; });
Get all elements where data-company
does not equal Microsoft
var notMicrosoft = $("ul:data(group) li:data(company)") .filter(function () { return $(this).data("company") != "Microsoft"; });
etc...
One caveat of the new :data()
selector is that you must set the data
value by code for it to be selected. This means that for the above to work, defining the data
in HTML is not enough. You must first do this:
$("li").first().data("company", "Microsoft");
This is fine for single page applications where you are likely to use $(...).data("datakey", "value")
in this or similar ways.
jQuery provides several selectors (full list) in order to make the queries you are looking for work. To address your question "In other cases is it possible to use other selectors like "contains, less than, greater than, etc..."." you can also use contains, starts with, and ends with to look at these html5 data attributes. See the full list above in order to see all of your options.
The basic querying has been covered above, and using John Hartsock's answer is going to be the best bet to either get every data-company element, or to get every one except Microsoft (or any other version of :not
).
In order to expand this to the other points you are looking for, we can use several meta selectors. First, if you are going to do multiple queries, it is nice to cache the parent selection.
var group = $('ul[data-group="Companies"]');
Next, we can look for companies in this set who start with G
var google = $('[data-company^="G"]',group);//google
Or perhaps companies which contain the word soft
var microsoft = $('[data-company*="soft"]',group);//microsoft
It is also possible to get elements whose data attribute's ending matches
var facebook = $('[data-company$="book"]',group);//facebook
//stored selectorvar group = $('ul[data-group="Companies"]');//data-company starts with Gvar google = $('[data-company^="G"]',group).css('color','green');//data-company contains softvar microsoft = $('[data-company*="soft"]',group).css('color','blue');//data-company ends with bookvar facebook = $('[data-company$="book"]',group).css('color','pink');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><ul data-group="Companies"> <li data-company="Microsoft">Microsoft</li> <li data-company="Google">Google</li> <li data-company ="Facebook">Facebook</li></ul>