Stack Overflow
Stack Overflow

Questions tagged [custom-data-attribute]

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

The HTML5 spec contains a "Embedding custom non-visible data with the data-* attributes" chapter that states the folowing:

A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).

[...]

Custom data attributes are intended to store custom data private to the page or application, for which there are no more appropriate attributes or elements.

These attributes are not intended for use by software that is independent of the site that uses the attributes.

958 questions
1100
votes
11 answers

Selecting element by data attribute with jQuery

Is there an easy and straight-forward method to select elements based on their data attribute? For example, select all anchors that has data attribute named customerID which has value of 22. I am kind of hesitant to use rel or other attributes to…
Hazem Salama
  • 13,976
  • 5
  • 25
  • 31
1070
votes
9 answers

jQuery how to find an element based on a data-attribute value?

I've got the following scenario: var el = 'li'; and there are 5
  • 's on the page each with a data-slide=number attribute (number being 1,2,3,4,5 respectively). I now need to find the currently active slide number which is mapped to var current =…
    • Jannis
    • 16,085
    • 17
    • 58
    • 73
    917
    votes
    15 answers

    How to get the data-id attribute?

    I'm using the jQuery quicksand plugin. I need to get the data-id of the clicked item and pass it to a webservice. How do I get the data-id attribute? I'm using the .on() method to re-bind the click event for sorted items. $("#list li").on('click',…
    Bruce Adams
    • 10,838
    • 6
    • 25
    • 34
    677
    votes
    4 answers

    jQuery selectors on custom data attributes using HTML5

    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:
    525
    votes
    3 answers

    jQuery Data vs Attr?

    What is the difference in usage between $.data and $.attr when using data-someAttribute? My understanding is that $.data is stored within jQuery's $.cache, not the DOM. Therefore, if I want to use $.cache for data storage, I should use $.data. If I…
    John B
    • 5,275
    • 3
    • 12
    • 6
    511
    votes
    6 answers

    Select elements by attribute in CSS

    Is it possible to select elements in CSS by their HTML5 data attributes (for example, data-role)?
    Diogo Cardoso
    • 19,349
    • 24
    • 92
    • 137
    330
    votes
    8 answers

    How to use dashes in HTML-5 data-* attributes in ASP.NET MVC

    I am trying to use HTML5 data- attributes in my ASP.NET MVC 1 project. (I am a C# and ASP.NET MVC newbie.) <%= Html.ActionLink("« Previous", "Search", new { keyword = Model.Keyword, page = Model.currPage - 1}, new { @class = "prev",…
    Shameem
    • 13,659
    • 13
    • 38
    • 42
    277
    votes
    8 answers

    How to set data attributes in HTML elements

    I have a div with an attribute data-myval = "10". I want to update its value; wouldn't it change if I use div.data('myval',20)? Do I need to use div.attr('data-myval','20') only? Am I getting confused between HTML5 and jQuery? Please advise.…
    Pulkit Mittal
    • 5,286
    • 5
    • 19
    • 26
    225
    votes
    8 answers

    Is there a limit to the length of HTML attributes?

    How long is too long for an attribute value in HTML? I'm using HTML5 style data attributes (data-foo="bar") in a new application, and in one place it would be really handy to store a fair whack of data (upwards of 100 characters). While I suspect…
    nickf
    • 499,078
    • 194
    • 614
    • 709
    200
    votes
    8 answers

    How can I get the values of data attributes in JavaScript code?

    I have next html: Is it possible to get the attributes that beginning with data-, and use it in the JavaScript code like code below? For now I…
    H. Pauwelyn
    • 11,346
    • 26
    • 71
    • 115
    181
    votes
    6 answers

    Adding data attribute to DOM

    $('div').data('info', 1); alert($('div').data('info')); //this works $('div[data-info="1"]').text('222'); //but this don't work I'm creating element within jquery. After that, I want to add attribute "data". He's like and is added, but in the…
    Luntegg
    • 2,290
    • 3
    • 14
    • 28
    174
    votes
    6 answers

    Do HTML5 custom data attributes “work” in IE 6?

    Custom data attributes: http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data When I say “work”, I mean, if I’ve got HTML like this:
    will the following JavaScript: var geoff =…
    Paul D. Waite
    • 89,393
    • 53
    • 186
    • 261
    131
    votes
    7 answers

    Unable to set data attribute using jQuery Data() API

    I've got the following field on an MVC view: @Html.TextBoxFor(model => model.Course.Title, new { data_helptext = "Old Text" }) In a seperate js file, I want to set the data-helptext attribute to a string value. Here's my…
    Jason Evans
    • 28,042
    • 13
    • 88
    • 145
    127
    votes
    4 answers

    Are empty HTML5 data attributes valid?

    I'd like to write a simple jQuery plugin that displays inline modals under specified elements. My idea is for the script to auto-init based on data attributes specified on elements. A very basic example:

    Hover over me for an…

    Adam
    • 3,061
    • 4
    • 21
    • 27
    116
    votes
    4 answers

    jQuery find element by data attribute value

    I have a few elements like below: 1 2 3 How can I add a class to the element which has a…
    MrUpsidown
    • 19,965
    • 12
    • 63
    • 114
    1
    2 3
    …
    63 64