Menu
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:
data-company="Microsoft" below "Companies" data-company!="Microsoft" below "Companies" 
238
If you want to define your own custom attributes in HTML, you can implement them through data-* format. * can be replaced by any of your names to specify specific data to an element and target it in CSS, JavaScript, or jQuery.
Use the querySelector method to get an element by data attribute, e.g. document. querySelector('[data-id="box1"]') . The querySelector method returns the first element that matches the provided selector or null if no element matches the selector in the document. Here is the HTML for the examples in this article.
You can use the attribute selector: $('[data-my-key]').
To set an attribute and value by using a function using this below syntax. $(selector). attr(attribute,function(index,currentvalue)) ; To set multiple attributes and values using this below syntax.
$("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
150
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
