dynamically changing custom html values using jquery - javascript

<div data-react-class="Duration" data-react-props="{"startDate":"","endDate":""}">
I have this in my html. How can I change the startDate and endDate values in data-react-props using jquery?

add an ID to the div:
<div id="sample" data-react-class="Duration" data-react-props="{"startDate":"","endDate":""}">
And use the setAttribute method:
document.getElementsByID('sample').setAttribute('data-react-props', '{"startDate":"","endDate":""}');

You can use jQuery data selectors
$("div[data-react-class='duration']").attr("data-react-props","{'startDate':'12-12-2017', 'endDate':'01-01-2018'}");

Related

How to select all the HTML elements having a custom attribute?

I know I can select all the HTML elements with a custom attribute by just doing:
$('p[mytag]')
As you can see, I also need to specify the actual HTML div type (a p element in this case). But what if I need to retrieve all the HTML elements irrespective of their type?
Consider this code:
<p>11111111111111</p>
<p mytag="nina">2222222222</p>
<div>33333333333</div>
<div mytag="sara">4444444444</div>
how I can select the 2 html elements (the p and the div) with custom attribute mytag?
You just need to use $("[mytag]")
console.log($("[mytag]"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>11111111111111</p>
<p mytag="nina">2222222222</p>
<div>33333333333</div>
<div mytag="sara">4444444444</div>
Use querySelectorAll (javascript) :
document.querySelectorAll('[mytag]');
Or even simpler with jQuery:
$('[mytag]');

custom attr selector using jquery

<div id="placeholdSlots">
<div sort-helper="1"></div>
</div>
How select the div using sort-helper custom attr? I know attr('sort-helper') can only get the value.
$('div[sort-helper]');
or in vanillaJS
document.querySelectorAll('div[sort-helper]');
Anyway I would suggest to use a data-* attribute instead, e.g.
<div data-sort-helper="1"></div>
use jQuery attribute selector
alert($('div[sort-helper="1"]').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="placeholdSlots">
<div sort-helper="1">abc</div>
</div>
jQuery is not the only way. You can use direct Javascript, like this:
Retrieving the firt div with an attribute called sort-helper
var elem = document.querySelector("[sort-helper]");
Retrieving all divs with an attribute called sort-helper
var list = document.querySelectorAll("[sort-helper]");
This is faster that jQuery because it is native code. And it is now cross-browser (for modern browsers ;-)).

Select an element with suffix id and a class name using Jquery

I am trying to select an element with a id which has suffix as "_pan1" and it should has class name as oleDiv1 from below code.
<div id="44_div_pan1" class="oleDiv1">
<div id="45_div_pan1" class="oleDiv2">
<div id="47_div_pan1" class="oleDiv1">
<div id="48_div_pan2" class="oleDiv4">
I can get elements using the suffix form ID name using below code
$("*[id$='_pan1']")
but i can not get the combinatined element which has the class oleDiv1
This code is not working $("*[id$='_pan1' .oleDiv1]") .
Please help me to correct the mistakes in my above code.
Thanks
Just combine the selectors without any space between them.
$('[id$=_pan].oleDiv1');
Try this
console.log($("*[id$='_pan1'].oleDiv1"));
Example
You need to use attribute ends with selector:
$('[id$="_pan1"].oleDiv1')

Custom attributes

I would like to get the value of custom attributes. For exemple, for this:
<div style="-my-data:3;" id="foo" ></div>
I would like to write something like that:
document.getElementById("foo").style.myData;
But it's not working. How can I do?
You should be using HTML5's custom data-* attributes instead:
<div data-myDataName="3" id="foo"></div>
Then, to get it via JavaScript, just use this:
document.getElementById('foo').getAttribute('data-myDataName'); // '3'
Here's the fiddle: http://jsfiddle.net/c55nf/
P.S. Even though it's part of HTML5, it'll still work in older browsers. It was just standardized in HTML5.
use the html data attribute:
<div data-style="3" id="foo"></div>
and then use
document.getElementById("foo").getAttribute("data-style");
to retrieve the information
Use HTML custom data attributes:
HTML:
<div data-myval="3" id="foo" ></div>​
JavaScript
alert(document.getElementById("foo").getAttribute('data-myval'));​
See the fiddle.

Get value of class of a DIV using JavaScript

Question is simple. Not using jQuery... how do I get the value of class value in a DIV using regular JavaScript?
Thanks.
Assuming this HTML
<div id="Target" class="MyClass" />
Like This
var ElementCssClass = document.getElementById("Target").className;
get a reference to the div and use .className
document.getElementById('someDiv').className

Categories