custom-data-attribute

In PHP, I use json_encode() to echo arrays in HTML5 data attributes. As JSON requires - and json_encode() generates - values encapsulated by double quotes. I therefor wrap my data attributes with single quotes, like: <article data-tags='["html5","jquery","php","test's"]'> As you can see, the last tag (test's) contains a single quote, and using json_encode() with no options leads to parsing problems. So I use json_encode() with the JSON_HEX_APOS parameter, and parsing is fine, as my single quotes are encoded, but I wonder: is there a downside doing it like this? You need to HTML escape data

I'm trying to select all elements that have a data-go-to attribute that is not empty. I've tried $('[data-go-to!=""]') but oddly enough it seems to be selecting every single element on the page if I do that. try $(':not([data-go-to=""])') UPDATE: For the sake of not leading anyone astray, this answer will work in older versions of jQuery but is not future-proof. Since @gmo and @siva's answers both seem to be working with later versions I defer to (and encourage you to upvote) their answers....and of course hope you have a fantastic day. Just as further reference, and an up-to-date (may'14)

I want to associate some custom data with some HTML nodes. I was going to use the new HTML5 style 'data-*' attributes. e.g.: <tr class="foo" data-typeid="7">… , and then I was going to select this HTML node and show/hide it etc. by reading the value with $(node).attr("data-typeid") . However this web page needs to work with older browsers aswell. I'm not using the data-* attribute as a special attribute, but I'd like to know if older browsers will ignore, wipe, or make inaccessible this attribute since it's not valid HTML4. There isn't really, they're not 100% correct/valid usage in HTML4 of

I am updating a data attribute by jQuery, Like: jQuery('div').data('hidden', 'true'); alert(jQuery('div').data('hidden')); Data attribute value got changed and returned new value which is true but DOM is still showing the old value which is false . When you use .data() to update a data value, it is updating internal object managed by jQuery, so it will not be updated in the data-* attribute I was beating around the bush so badly :( and able to solve the problem. Seams like we can't do achieve this using the jquery data method if the html is dynamic and the data attribute changed later after

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" }); }); You need to access the dataset property : document.getElementById("the-span").addEventListener("click", function() { var

$('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 Use the .data() method: $('div').data('info', '222'); Note that this doesn't create an actual data-info attribute. If you need to create the attribute, use .attr() : $('div').attr('data-info', '222'); Brendon Shih jQuery's .data() does a couple

So any custom data attribute that I use should start with "data-": <li class="user" data-name="John Resig" data-city="Boston" data-lang="js" data-food="Bacon"> <b>John says:</b> <span>Hello, how are you?</span> </li> Will anything bad happen if I just ignore this? I.e.: <li class="user" name="John Resig" city="Boston" lang="js" food="Bacon"> <b>John says:</b> <span>Hello, how are you?</span> </li> I guess one bad thing is that my custom attributes could conflict with HTML attributes with special meanings (e.g., name ), but aside from this, is there a problem with just writing "example_text"

In my html I have a span element: <span class="field" data-fullText="This is a span element">This is a</span> And I want to get the data-fullText attribute. I tried these two ways, but they didn't work (the both return undefined ): $('.field').hover(function () { console.log('using prop(): ' + $(this).prop('data-fullText')); console.log('using data(): ' + $(this).data('fullText')); }); Then I searched and found these questions: How to get the data-id attribute? and jquery can't get data attribute value . The both's answers are "Use .attr('data-sth') or .data('sth')" . I know that .attr() is

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. (I would prefer to not have the page styling rely on jQuery if possible) My question regards: Data-Attribute in HTML Background-image in CSS I am using this format for my html thumbnails: <div class="thumb" data-image-src="images/img.jpg"></div> and I assume the CSS should look something like this: .thumb { width:150px; height:150px; background-position:center center; overflow:hidden; border:1px solid black; background-image: