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 DOM, this is not apparent, and I can’t get the item, using $(‘div[data-example=”example”]’).html() jsfiddle 6 Answers 6

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

I have next html: <span data-typeId=”123″ data-type=”topic” data-points=”-1″ data-important=”true” id=”the-span”></span> 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. document.getElementById(“the-span”).addEventListener(“click”, function(){ var json = JSON.stringify({ id: parseInt(this.typeId), subject: this.datatype, points: parseInt(this.points), user: “H. Pauwelyn” }); }); … Read more

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. Thanks! EDIT: Updated div.data(‘myval’)=20 to div.data(‘myval’,20), but still the HTML is not updating. 8 Answers … Read more

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”, data-details = “Some Details” })%> The “data-details” in the above htmlAttributes give the following … Read more

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 want to add HTML5 data-attributes, I should use $.attr(“data-attribute”, “myCoolValue”). 3 s 3

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: <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: All elements with data-company=”Microsoft” below “Companies” All elements with data-company!=”Microsoft” below “Companies” In other cases … Read more

How can I 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’, function() { // ret = DetailsView.GetProject($(this).attr(“#data-id”), OnComplete, OnTimeOut, OnError); alert($(this).attr(“#data-id”)); }); … Read more

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 <li>‘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 = $(‘ul’).data(current); and is updated on each slide change. So far my tries have been … Read more