Jquery Selectors on Custom Data Attributes Using HTML5

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 selectors and HTML5 data-* attributes set dynamically

The data- attribute to jQuery data() mapping is one-direction. You should use the attr() function if you want to actually set the attribute on the node.

$("#mich").attr("data-people", "australian");

From the docs:

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery)

jQuery selector for HTML5 data attributes

Just remove the space between the selector.

$(".wishlist-icon[data-wish-name='product'][data-wish-url='/product']").hide();

Js Fiddle Demo

Selecting element by data attribute with jQuery

$('*[data-customerID="22"]');

You should be able to omit the *, but if I recall correctly, depending on which jQuery version you’re using, this might give faulty results.

Note that for compatibility with the Selectors API (document.querySelector{,all}), the quotes around the attribute value (22) may not be omitted in this case.

Also, if you work with data attributes a lot in your jQuery scripts, you might want to consider using the HTML5 custom data attributes plugin. This allows you to write even more readable code by using .dataAttr('foo'), and results in a smaller file size after minification (compared to using .attr('data-foo')).

jQuery selector with a wild card selection of a HTML5 custom data attribute

It works with this :

$(function () {
    $('#selectMe').children('[data-roleids~="1"]').css('background-color','yellow');
});

See http://api.jquery.com/attribute-contains-word-selector/

jQuery selectors on custom data attribute that are not empty

You can use :not() selector and remove the empty ones

$('[data-custom-tooltip]:not([data-custom-tooltip=""])')

or

$('[data-custom-tooltip]').not('[data-custom-tooltip=""]')

---

or based on what @VisioN said in the comments with the Not Equal Selector

var xxx = $('[data-custom-tooltip][data-custom-tooltip!=""]');

Selecting custom data attributes in JQuery

You are pretty close. You can use jQuery's .data() method to read attributes that start with data-. So in your case .data("value") since your attribute is data-value="some".

This should do it:

$('li[data-value]').each(function(){
     alert($(this).data("value"));
});

Here is a working fiddle as well: http://jsfiddle.net/nuphP/

jquery access html5 custom data attribute in JSON format

Your attribute is not JSON. Because of that jQuery can't parse this string as JSON. Basically it checks with try-catch block, and if it's able to parse it then jQuery returns object as the result of .data call.

Make it valid JSON string then it will work:

data-seqSet='{"set": "1", "seq1": "foo","seq2": "bar"}'

Note, how attributes need to be properly quoted with ".

---

Source code refs:

Here is a function that is used to convert attribute string to object:
https://github.com/jquery/jquery/blob/1777899a747647f3fa839eea4b0bb695d3b60f06/src/data.js#L42 (called from https://github.com/jquery/jquery/blob/1777899a747647f3fa839eea4b0bb695d3b60f06/src/data.js#L153).

---

Related Topics