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 store such information, but I find it much harder to select an element based on what data is stored in it.


Selecting element by data attribute with jQuery

I&#39;ve got the following scenario:

    var el = &#39;li&#39;;

and there are 5 `&lt;li&gt;`&#39;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 = $(&#39;ul&#39;).data(current);` and is updated on each slide change.

So far my tries have been unsuccessful, trying to construct the selector that would match the current slide:

    $(&#39;ul&#39;).find(el+[data-slide=+current+]);

does not match/return anything…

The reason I can&#39;t hardcode the `li` part is that this is a user accessible variable that can be changed to a different element if required, so it may not always be an `li`.

Any ideas on what I&#39;m missing?

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

I&#39;m using the jQuery *[Quicksand][1]* 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&#39;m using the `.on()` method to re-bind the click event for sorted items.

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-js --&gt;

    $(&quot;#list li&quot;).on(&#39;click&#39;, function() {
      //  ret = DetailsView.GetProject($(this).attr(&quot;#data-id&quot;), OnComplete, OnTimeOut, OnError);
      alert($(this).attr(&quot;#data-id&quot;));
    });

&lt;!-- language: lang-html --&gt;
&lt;script src=&quot;https://code.jquery.com/jquery-3.3.1.slim.min.js&quot;&gt;&lt;/script&gt;

    &lt;ul id=&quot;list&quot; class=&quot;grid&quot;&gt;
      &lt;li data-id=&quot;id-40&quot; class=&quot;win&quot;&gt;
        &lt;a id=&quot;ctl00_cphBody_ListView1_ctrl0_SelectButton&quot; class=&quot;project&quot; href=&quot;#&quot;&gt;
          &lt;img src=&quot;themes/clean/images/win.jpg&quot; class=&quot;project-image&quot; alt=&quot;get data-id&quot; /&gt;
        &lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;

&lt;!-- end snippet --&gt;

  [1]: https://github.com/razorjack/quicksand




How can I get the data-id attribute?

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:

    &lt;ul data-group=&quot;Companies&quot;&gt;
      &lt;li data-company=&quot;Microsoft&quot;&gt;&lt;/li&gt;
      &lt;li data-company=&quot;Google&quot;&gt;&lt;/li&gt;
      &lt;li data-company =&quot;Facebook&quot;&gt;&lt;/li&gt;
    &lt;/ul&gt;

Are there selectors to get:

- All elements with `data-company=&quot;Microsoft&quot;` below `&quot;Companies&quot;`
- All elements with `data-company!=&quot;Microsoft&quot;` below `&quot;Companies&quot;`
- In other cases is it possible to use other selectors like &quot;contains, less than, greater than, etc...&quot;.

jQuery selectors on custom data attributes using HTML5

What is the difference in usage between `$.data` and `$.attr` when using `data-someAttribute`?

My understanding is that `$.data` is stored within jQuery&#39;s `$.cache`, not the DOM. Therefore, if I want to use `$.cache` for data storage, I should use `$.data`. If I want to add HTML5 data-attributes, I should use `$.attr(&quot;data-attribute&quot;, &quot;myCoolValue&quot;)`.

jQuery Data vs Attr?

Is it possible to select elements in CSS by their HTML5 data attributes (for example, `data-role`)?

Select elements by attribute in CSS

I am trying to use [HTML5 data- attributes][1] in my ASP.NET MVC 1 project. (I am a C# and ASP.NET MVC newbie.)

     &lt;%= Html.ActionLink(&quot;&#171; Previous&quot;, &quot;Search&quot;,
         new { keyword = Model.Keyword, page = Model.currPage - 1},
         new { @class = &quot;prev&quot;, data-details = &quot;Some Details&quot;   })%&gt;

The &quot;data-details&quot; in the above htmlAttributes give the following error:

     CS0746: Invalid anonymous type member declarator. Anonymous type members 
      must be declared with a member assignment, simple name or member access.

It works when I use data_details, but I guess it need to be starting with &quot;data-&quot; as per the spec.

My questions:

 - Is there any way to get this working and use HTML5 data attributes with Html.ActionLink or similar Html helpers ?
 - Is there any other alternative mechanism to attach custom data to an element? This data is to be processed later by JS.


  [1]: http://ejohn.org/blog/html-5-data-attributes/

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

I have a div with an attribute `data-myval = &quot;10&quot;`. I want to update its value; wouldn&#39;t it change if I use `div.data(&#39;myval&#39;,20)`? Do I need to use `div.attr(&#39;data-myval&#39;,&#39;20&#39;)` only?

Am I getting confused between HTML5 and jQuery? Please advise. Thanks!

EDIT: Updated `div.data(&#39;myval&#39;)=20` to `div.data(&#39;myval&#39;,20)`, but still the HTML is not updating.

How to set data attributes in HTML elements

I have next html:

```html
&lt;span data-typeId=&quot;123&quot; data-type=&quot;topic&quot; data-points=&quot;-1&quot; data-important=&quot;true&quot; id=&quot;the-span&quot;&gt;&lt;/span&gt;
```

Is it possible to get the attributes that beginning with `data-`, and use it in the **JavaScript** code like code below? For now I get `null` as result.

```js
document.getElementById(&quot;the-span&quot;).addEventListener(&quot;click&quot;, function(){
    var json = JSON.stringify({
        id: parseInt(this.typeId),
        subject: this.datatype,
        points: parseInt(this.points),
        user: &quot;H. Pauwelyn&quot;
    });
});
```

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

How long is too long for an attribute value in HTML?

I&#39;m using HTML5 style data attributes (`data-foo=&quot;bar&quot;`) 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 that this amount is fine, it raises the question of how much is too much?

Is there a limit to the length of HTML attributes?

    $(&#39;div&#39;).data(&#39;info&#39;, 1);

    alert($(&#39;div&#39;).data(&#39;info&#39;));
    //this works    
    
    $(&#39;div[data-info=&quot;1&quot;]&#39;).text(&#39;222&#39;);
    //but this don&#39;t work

I&#39;m creating element within jquery. After that, I want to add attribute &quot;data&quot;. He&#39;s like and is added, but in the DOM, this is not apparent, and I can&#39;t get the item, using

    $(&#39;div[data-example=&quot;example&quot;]&#39;).html()

[**jsfiddle**][1]


  [1]: http://jsfiddle.net/jRFnV/

Adding data attribute to DOM

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:

    &lt;div id=&quot;geoff&quot; data-geoff=&quot;geoff de geoff&quot;&gt;

will the following JavaScript:

    var geoff = document.getElementById(&#39;geoff&#39;);
    alert(geoff.dataGeoff);

produce, in IE 6, an alert with “geoff de geoff” in it?

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

I&#39;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:

    &lt;p data-modal-target&gt;Hover over me for an inline modal!&lt;/p&gt;
    &lt;div data-modal-content data-modal-align=&quot;right&quot; data-modal-trigger=&quot;hover&quot; data-modal-offset=&quot;10px&quot;&gt;&lt;!-- any desired syntax can go here --&gt;&lt;/div&gt;

I&#39;m just wondering if `data-modal-target` in the above example is valid, or does it have to be `data-modal-target=&quot;true&quot;`? I don&#39;t care about anything crappier than IE9 etc, my only requirement is that it be valid HTML5.

Are empty HTML5 data attributes valid?

I&#39;ve got the following field on an MVC view:

    @Html.TextBoxFor(model =&gt; model.Course.Title, new { data_helptext = &quot;Old Text&quot; })&lt;/span&gt;

In a seperate js file, I want to set the `data-helptext` attribute to a string value. Here&#39;s my code:

    alert($(targetField).data(&quot;helptext&quot;));
            
    $(targetField).data(&quot;helptext&quot;, &quot;Testing 123&quot;);

The `alert()` call works fine, it shows the text &quot;Old Text&quot; in an alert dialog. However, the call to set the `data-helptext` attribute to &quot;Testing 123&quot; does not work. &quot;Old Text&quot; is still the attribute&#39;s current value.

Am I using the call to data() incorrectly? I&#39;ve looked this up on the web, and I can&#39;t see what I&#39;m doing wrong.


Here&#39;s the HTML markup:

    &lt;input data-helptext=&quot;Old Text&quot; id=&quot;Course_Title&quot; name=&quot;Course.Title&quot; type=&quot;text&quot; value=&quot;&quot; /&gt;

Unable to set data attribute using jQuery Data() API

I have a few elements like below:

    &lt;a class=&quot;slide-link&quot; href=&quot;#&quot; data-slide=&quot;0&quot;&gt;1&lt;/a&gt;
    &lt;a class=&quot;slide-link&quot; href=&quot;#&quot; data-slide=&quot;1&quot;&gt;2&lt;/a&gt;
    &lt;a class=&quot;slide-link&quot; href=&quot;#&quot; data-slide=&quot;2&quot;&gt;3&lt;/a&gt;

How can I add a class to the element which has a `data-slide` attribute value of `0` (zero)?

I have tried many different solutions but nothing worked. An example:

    $(&#39;.slide-link&#39;).find(&#39;[data-slide=&quot;0&quot;]&#39;).addClass(&#39;active&#39;);

Any idea?

jQuery find element by data attribute value

I&#39;m trying to select all elements that have a `data-go-to` attribute that is not empty.

I&#39;ve tried `$(&#39;[data-go-to!=&quot;&quot;]&#39;)` but oddly enough it seems to be selecting every single element on the page if I do that.

jQuery: Select data attributes that aren&#39;t empty?

I&#39;ve an element in the DOM:

`&lt;a href=&quot;#&quot; data-a=&quot;1&quot;&gt;Link&lt;/a&gt;`

I want to get this element via its HTML5 custom data attribute `data-a`. So I write JS codes:

`var a = document.querySelector(&#39;a[data-a=1]&#39;);`

But this code doesn&#39;t work and I get an error in browser&#39;s console. (I tested Chrome and Firefox.)

JS code `var a = document.querySelector(&#39;a[data-a=a]&#39;);` doesn&#39;t cause error. So I think the problem is that HTML5&#39;s JS API `document.querySelector` doesn&#39;t support to look for the number value in HTML5 custom data attribute.

Is this a problem of browser implementation bug or a problem of HTML5&#39;s spec relevant to `document.querySelector`?

Then I tested codes below on http://validator.w3.org/:

    &lt;!DOCTYPE html&gt;
    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;title&gt;An HTML Document&lt;/title&gt;
    &lt;a href=&quot;#&quot; data-a=&quot;1&quot;&gt;Link&lt;/a&gt;

They&#39;re validated. Since these HTML5 codes are validated. We should can use HTML5&#39;s JS API `document.querySelector` to look for this anchor element via its custom data attribute. But tha fact is that I get error.

Does HTML5&#39;s spec to HTML5 JS API `document.querySelector` say that this method can not look for an HTML5 data custom attribute with a number value? (An HTML5 spec source is wanted.)


Why does JS code &quot;var a = document.querySelector(&#39;a[data-a=1]&#39;);&quot; cause error?

I plan on building a custom photo gallery for a friend and I know exactly how I am going to be producing the HTML, however I am running into a small issue with the CSS.&lt;br&gt;(I would prefer to not have the page styling rely on jQuery if possible)
&lt;hr&gt;
My question regards:&lt;br&gt;
`Data-Attribute` in HTML&lt;br&gt;
`Background-image` in CSS
&lt;hr&gt;
I am using this format for my html thumbnails:&lt;br&gt;
`&lt;div class=&quot;thumb&quot; data-image-src=&quot;images/img.jpg&quot;&gt;&lt;/div&gt;`&lt;br&gt;&lt;br&gt;

and I assume the CSS should look something like this:&lt;br&gt;

    .thumb {
        width:150px;
        height:150px;
        background-position:center center;
        overflow:hidden;
        border:1px solid black;

        background-image: attr(data-image-src);/*This is the question piece*/
    }

&lt;hr&gt;
My goal is to take the `data-image-src` from the `div.thumb` in my HTML file and use it for each `div.thumb`(s) `background-image` source in my CSS file.

Here is a Codepen Pen in order to get a dynamic example of what I am looking for:&lt;br&gt;
http://codepen.io/thestevekelzer/pen/rEDJv

Using HTML data-attribute to set CSS background-image url

Is there anyway to have a SelectList prepopulated on ViewModel with data-attributes ?

I want to do 

    @Html.DropdownListFor(m=&gt; m.CityId, Model.Cities);

so it generates code like :

    &lt;select id=&quot;City&quot; class=&quot;location_city_input&quot; name=&quot;City&quot;&gt;
        &lt;option data-geo-lat=&quot;-32.522779&quot; data-geo-lng=&quot;-55.765835&quot; data-geo-zoom=&quot;6&quot; /&gt;
        &lt;option data-geo-lat=&quot;-34.883611&quot; data-geo-lng=&quot;-56.181944&quot; data-geo-zoom=&quot;13&quot; data-geo-name=&quot;Montevideo&quot; data-child=&quot;.state1&quot; value=&quot;1&quot;&gt;Montevideo&lt;/option&gt;               
        &lt;option data-geo-lat=&quot;-34.816667&quot; data-geo-lng=&quot;-55.95&quot; data-geo-zoom=&quot;13&quot; data-geo-name=&quot;Canelones, Ciudad de la Costa&quot; data-child=&quot;.state41&quot; value=&quot;41&quot;&gt;Ciudad de la Costa&lt;/option&gt;
    &lt;/select&gt;



SelectListItem with data-attributes

In my html I have a `span` element:

    &lt;span class=&quot;field&quot; data-fullText=&quot;This is a span element&quot;&gt;This is a&lt;/span&gt;

And I want to get the `data-fullText` attribute. I tried these two ways, but they didn&#39;t work (the both return `undefined`):

    $(&#39;.field&#39;).hover(function () {
        console.log(&#39;using prop(): &#39; + $(this).prop(&#39;data-fullText&#39;));
        console.log(&#39;using data(): &#39; + $(this).data(&#39;fullText&#39;));
    });

Then I searched and found these questions: https://stackoverflow.com/questions/5309926/how-to-get-the-data-id-attribute-using-jquery and https://stackoverflow.com/questions/17351282/jquery-cant-get-data-attribute-value.  
The both&#39;s answers are `&quot;Use .attr(&#39;data-sth&#39;) or .data(&#39;sth&#39;)&quot;`.  
I know that `.attr()` is deprecated (in jquery-1.11.0, which I use), but, however, I tried it.  
And it workded!

Can someone explain why?

jQuery: get data attribute

Recently I was coding away, and I ran into a weird issue.  I was attempting to assign a data attribute to a new element I had created (via jQuery), only to discover it wouldn&#39;t actually assign the attribute.    See the link below for an example, the code is listed below:

http://jsfiddle.net/y95p100c/1/

Any idea why this is happening?  I&#39;ve never stumbled into this...

    var div = $(&quot;&lt;div /&gt;&quot;)
    $(div).data(&quot;foo&quot;, &quot;bar&quot;)
    console.log($(div)[0].outerHTML) // prints &lt;div&gt;&lt;/div&gt;

JQuery .data() not working?

I am reading some values in data attribute fields. I have seen two easy ways to read the data as shown below:

    var webappData = document.getElementById(&#39;web-app-data&#39;),
        rating = webappData.dataset.rating;

OR

    var effectData = $(&#39;.effects-list li&#39;),
        creative = effectData.filter(&#39;[data-creative]&#39;).data(&quot;creative&quot;);

My question is which of these has better performance or do they really differ?

I have a page with many data attributes that I am accessing and I would like to use the method that has the best performance. 

Any guidance on understanding the difference between the two would be appreciated. While I am looking at performance specifically if there are other reasons to use one over the other I would like to know this as well. 

dataset vs .data - Difference?

I have a custom data-attribute set by default:

&lt;code&gt;data-equipment=&quot;0&quot;&lt;/code&gt;
 
If i change it with jquery using **.data()** 

&lt;code&gt;$(this).data(&quot;equipment&quot;, 10)&lt;/code&gt;

and then use the **getAttribute()**

&lt;code&gt;this.getAttribute(&quot;data-equipment&quot;)&lt;/code&gt;

i get the old value (0) and not the new one (10). But if i use

&lt;code&gt;$(this).data(&quot;equipment&quot;)&lt;/code&gt; i get the new value (10).

Is this supposed to work like this or am i missing something? 

Thanks!

All Custom Data-Attribute Solutions on Gang of Coders

Total of 23 Custom Data-Attribute Solutions