custom-data-attribute

Given html such as : <div data-points="800">Jonh</div> <div data-points="200">Jack</div> <div data-points="1200">Julian</div> How to select elements were the value is superior to 1000 (x>1000) ? Preference : via CSS selectors. If no such thing, then I will re-ask for a JQuery / JS answer. Eventually used : var x = 1000; $("div").each(function() { if ($(this).attr('data-points') > x) { $(this).addClass('larger-than-x'); // Or whatever } }); With CSS you can select elements with their attributes: div[data-points] { } or the value of their attributes: div[data-points="800"] { } but you can't use

How can I set custom data- attribute on the {{#linkTo}} helper? I want use this: {{#linkTo "foo" data-toggle="dropdown"}}foo{{/linkTo}} and the result should look like this: <a id="ember323" class="ember-view active" data-toggle="dropdown" href="#/foo/123">foo</a> but it looks like: <a id="ember323" class="ember-view active" href="#/foo/123">foo</a> How can I do this? intuitivepixel A way you could do this is to extend your Ember.LinkComponent to be aware of the new attribute: Ember.LinkComponent.reopen({ attributeBindings: ['data-toggle'] }); And then you can use it in your {{#link-to}}

Well it must be late and my brain got numb. How come jQuery doesn't recognize case sensitive in data attribute? I faced this annoying problem: HTML: <a data-showId="12345">Test 1</a> Javascript: console.log($('a').data('showId')); console.log($('a').data('showid')); The first line is undefined and second returned 12345 correctly. I thought it supposed to returned correctly in first line and undefined in second. So does it mean all data- attr must be lowercase? Check it out here http://jsfiddle.net/qhoc/7dExt/1/ I think it has to do with the fact that data-* explicitly prevents the data key

I wanna use jQuery's data() api to retrieve all the data attribute of an element. But the cache nature of this api is really annoying. Sometimes I need to change some data atribute of an element in javascript but the data() api always return the initial value of each data attribute. So I have to use the attr() to access each data attribute of an element to get its up-to-date value. Is there any way to overcome this cache thing and make data() always return the latest value every time I call it? The short answer is: don't use jQuery .data() for dynamically set data attributes, unless you can

I've been seeing these attributes around on more modern websites like GitHub and such, and they always seemed to coincide with a customized popover like the title attribute. <a href="/" data-value="hovering message">Option 1</a> <a href="/" data-title="hovering message">Option 2</a> <a href="/" data-original-title="hovering message">Option 3</a> <a href="/" original-title="hovering message">Option 4</a> I read some documents about data- attributes on HTML5 Doctor, and I'm not quite sure of the point. Is there some SEO or accessibility benefit to using them? And what is the plugin(hopefully

I have a custom data-attribute set by default: data-equipment="0" If i change it with jquery using .data() $(this).data("equipment", 10) and then use the getAttribute() this.getAttribute("data-equipment") i get the old value (0) and not the new one (10). But if i use $(this).data("equipment") i get the new value (10). Is this supposed to work like this or am i missing something? Thanks! .data() doesn't operate on data attributes but in internal jQuery cache. Initially if no cache record is found, the data is read from a corresponding data- attribute if one exists, but that is the end of their