jquery-data

Setting a value dynamically for data attributes using jquery

由 梦想的初衷 提交于 2019-12-17 16:19:32
问题 I use data attributes extensively for managing data in client side events. Is it possible to assign value dynamically to a data attribute using javascript or jquery? <li data-class_value="somevalue" class="myclass"></li> $('.myclass').click(function(){ $(this).data('class_value') = "new value"; }); The above javascript code throws the error: "Uncaught ReferenceError: Invalid left-hand side in assignment". Could someone please tell me how this can be achieved? 回答1: You need to do $(this).data(

Are HTML 5 data- attribute and jQuery data same thing?

由 痞子三分冷 提交于 2019-12-12 04:44:18
问题 In HTML 5 its possible to set arbitrary 'data-' attributes to elements like <div data-blah="blah"> The jQuery framework has methods to do similar things ( .data() etc). My question is do the jQuery methods just manipulate and read these html5 data attributes, or they are referring to different jQuery-type data-attributes? 回答1: No, totally different things. jQuery's .data() existed even before HTML5. See: http://api.jquery.com/data/ for details. To get HTML5 data- attribute value from html tag

How to set jQuery data() on an iFrame body tag and retrieve it from inside the iFrame?

由 ぐ巨炮叔叔 提交于 2019-12-11 20:33:00
问题 I'm stuck trying to set data() on an iFrame I create. This is what I'm doing: // options > my configuration object // options.src = eg "path/foo.html" // options.id = uuid // options.parent = $(elem) // options.param = JSON object newHTML = document.createElement("iframe"); newHTML.setAttribute("src", options.src); newHTML.setAttribute("frameborder", 0); newHTML.setAttribute("seamless", "seamless"); newHTML.setAttribute("data-id", options.id); newParentElement = options.parent.parent()[0];

Assigning individual keys of object stored in jQuery.data()

由 一个人想着一个人 提交于 2019-12-11 05:04:10
问题 I have custom data stored on elements using jQuery.data() method. <div id="mydiv" data-test='{"1":"apple", "2":"banana"}'>Custom data</div> I know I can access individual keys of the object stored in data-test using $('#mydiv').data('test')["1"] But is it ok to re-assign individual keys like this ? It works but it isn't documented. Secondly, on inspecting the element using browser's developer tools, I still see the old value i.e. "apple" in this case. JSFiddle $('#mydiv').data('test')["1"] =

How to preserve the case of a data attribute?

由 三世轮回 提交于 2019-12-08 14:30:20
问题 The html object: <div data-myAttribute="test"></div> The code: var $o = $("div"); $.each($o.data(),function(k,v){ console.log(k); //writes 'myattribute' instead of 'myAttribute' }); How do I preserve the case of the attribute? 回答1: If your goal is to target myAttribute as key of dataset property, you should use data-my-attribute : <div data-my-attribute="test"></div> See following link regarding camelCased rule: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset PS: as

Prevent converting string containing an E and numbers to number

由 会有一股神秘感。 提交于 2019-12-06 03:00:07
问题 We have this 'strange' situation where some product codes, for example 11E6, which are stored in data attributes (ex data-prodcode) are getting converted to 11000000, when retrieved inside jquery click function. Something like this: <a data-prodcode="11E6">click</a> var code = $(this).data('prodcode'); console.log(code); --> 11000000 Any advice on how to avoid this behavior or what may cause it? 回答1: From the documentation : Every attempt is made to convert the string to a JavaScript value

How to set data attribute with jQuery on element that is not in DOM yet?

由 风格不统一 提交于 2019-12-02 22:59:36
问题 How can I set the data-attribute with jQuery on an element that is not in the DOM yet? Code: var panelHeading = $('<div/>', {class:'panel-heading', href:'#'+username+'PanelContent'}); panelHeading.data('toggle', 'collapse').data('target',"#"+username+"PanelContent"); The data attributes don't appear when I append it to the document. The other attributes do appear. 回答1: You can add data attributes when creating the element var panelHeading = $('<div />', { 'class' : 'panel-heading', href : '#'

HTML5 data-* attribute type casting strings and numbers

由 依然范特西╮ 提交于 2019-12-01 02:39:52
Why is the value of data-value="2.0" cast to a String and the value of data-value="2.5" cast to a Number? I can handle this fine within my function. I'm just trying to understand a little more about how Javascript handles Numbers and Strings. This kind of caught me off guard. <a data-value="2.0">2.0</a> <a data-value="2.5">2.5</a> $("a").click(function() { alert(typeof $(this).data( "value")); }); [ Fiddle With It ] Those values are simply strings to vanilla javascript; it's not attempting any conversion on its own. [...document.querySelectorAll("a")].forEach(a => console.log("type: %s, value:

HTML5 data-* attribute type casting strings and numbers

由 时光总嘲笑我的痴心妄想 提交于 2019-11-30 21:25:18
问题 Why is the value of data-value="2.0" cast to a String and the value of data-value="2.5" cast to a Number? I can handle this fine within my function. I'm just trying to understand a little more about how Javascript handles Numbers and Strings. This kind of caught me off guard. <a data-value="2.0">2.0</a> <a data-value="2.5">2.5</a> $("a").click(function() { alert(typeof $(this).data( "value")); }); [ Fiddle With It ] 回答1: Those values are simply strings to vanilla javascript; it's not

Group and count HTML elements by data attribute in jQuery

由 穿精又带淫゛_ 提交于 2019-11-29 10:22:22
I'm trying to group each instance of a data attribute into a list from the number of occurrences of each attribute in a page, using jQuery. Similar to grouping categories or tags in a news section. For example, I would like to create something like this: Category 1 (5) Category 2 (3) Category 3 (1) from this html: <ul class="categories"> <li data-category="category-1">Category 1</li> <li data-category="category-1">Category 1</li> <li data-category="category-1">Category 1</li> <li data-category="category-1">Category 1</li> <li data-category="category-1">Category 1</li> <li data-category=
订阅 jquery-data