We Keep Coding

HTML store value into div and get its value

I have a div like
<div class="firstclass" id="first" data-value="firstvalue">SomeThing</div>
Here I want to get the value in data-value like by doing document.getElementById('first').value or something like this..
How can I get this value or if there is similar approach

Use .attr() or .getAttribute(). That would work.
jQuery Solution
$(function(){
console.log($('#first').attr('data-value'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="firstclass" id="first" data-value="firstvalue">SomeThing</div>
JavaScript Solution
function Example(){
console.log(document.getElementById('first').getAttribute("data-value"));
}
Example();
<div class="firstclass" id="first" data-value="firstvalue">SomeThing</div>

jQuery has the data() method. Consider using it:
// To get/read the value
$("#first").data("value")
// To set the value
$("#first").data("value", "foo-bar")
Docs:
Return the value at the named data store for the first element in the
jQuery collection, as set by data(name, value) or by an HTML5 data-*
attribute.

You can consider it as a normal attribute and use plain javascript as follows:
document.getElementById("first").getAttribute('data-value');
Since the attribute naming follows the data- naming convention we can use the HTML5 data specification.
In plain javascript you use the dataset API:
document.getElementById("first").dataset.value;
However, jQuery provides a nice shortcut for this:
$("#first").data("value");

I have found that using .val() works nicely here
To Set:
$("#div").val(1); // Sets value of div to 1
To Retrieve:
let foo = $("#div").val(); // Retrieves "1"

Use the getAttribute() method.
In your case -
document.getElementById('first').getAttribute('data-value')
Documentation can be found here:
http://www.w3schools.com/jsref/met_element_getattribute.asp

String value in li's value attribute using jquery

I have string value in li's value attributes but it is giving me 0 when I am trying to get with jquery. Any Idea why? fiddle
$(function(){
alert($('li').attr('value'))
})
<li value="CAD"></li>

For custom properties you could use $.data() method, for sample:
alert($('li').data('value'));
and in your html use the prefix data-,
<li data-value="CAD"></li>
You also could use $.data() method to set values in a data custom property, for sample:
$('li').data('value', '123');

In html value is a predefined attribute for li which can store only number. you can find it here. As it can be used to store number of the list.
http://www.w3schools.com/tags/tag_li.asp

You can use data- prefix.
http://jsfiddle.net/37pAZ/1/
$(function(){
alert($('li').attr('data-value'))
})
<li data-value="CAD"></li>

You can try following..
Html:
<li data-value="CAD"></li>
JS:
alert($('li').data('value'));
Here is demo : http://jsfiddle.net/ed8ZL/

try this one fiddle
<li data-value="CAD"></li>
alert($('li').data('value'))

How to read the contents of a href with javascript?

I have the following html and am stumped as to how to read the contents of the href tag?
<p class="xyz-title">
<a href="http://www.youtube.com/embed/xyz">
<span class="field-content">Title here</span>
</a>
</p>
I tried document.getElementByClass('xyz-title')[0].innerHTML but that didn't work obviously.
Thanks very much for pointing me in the right direction.

It is a syntax error. It is supposed to be getElementsByClassName. Use this instead:
document.getElementsByClassName('xyz-title')[0].innerHTML
And for selecting the <a> tag inside the <p class="xyz-title"> You need to use this code:
document.getElementsByClassName('xyz-title')[0].children[0].href
document.getElementsByClassName('xyz-title')[0].getElementsByTagName('a')[0].href
Or, you can simply use:
document.getElementsByTagName('a')[0].href
Fiddle: http://jsfiddle.net/praveenscience/DZhRv/

.innerHTML will give you the content of the element, not the value of any attributes. .href will give you the href value.
You tried to use getElementByClass() by there is no such function - you want getElementsByClassName() (as per the tag that you added to the question), a function that returns a list so you do need the [0] to get the first one.
To select the anchor element, try:
document.getElementsByClassName('xyz-title')[0].getElementsByTagName('a')[0].href
Or, simpler:
document.querySelector('.xyz-title a').href
Demo: http://jsfiddle.net/6Pg43/
Note that either way will give an error if the elements don't exist.

Working FIDDLE Demo
Try this:
var href = document.getElementsByClassName('xyz-title')[0].getElementsByTagName('a')[0].href;
alert(href);

Change outerHTML in javascript

$(editor[i])[0].outerHTML has a value of:
<p style="color: red;" data-mce-style="color: red;">some string</p>
I want data-mce-style="color: red;" to disappear.
I'm doing that like this:
$(editor[i])[0].outerHTML.replace('data-mce-style="color: red;"', '');
But it's not replacing it.

.replace creates a new transformed string; it does not alter the original variable. You're simply creating a new string and not storing the new string back into outerHTML, like:
$(editor[i])[0].outerHTML = $(editor[i])[0].outerHTML.replace('data-mce-style="color: red;"', '');
However, this only solves your immediate problem -- there are vastly better ways to accomplish what you need than stringifying and re-parsing your <p> element. Since you're using jQuery, the most obvious way would be to use the removeAttr method:
$(editor[i]).removeAttr('data-mce-style')​;​

Try:
$(editor[i]).removeAttr('data-mce-style')
http://api.jquery.com/removeAttr/
Of course this will apply to all elements in your selector. If you just want to apply this to element 0 then use:
$(editor[i]).first().removeAttr('data-mce-style')

element.setAttribute(attr, null)
or
element.removeAttribute
No need for outerHTML and replace. Note that replacing HTML will remove event listeners (other than attribute event handlers).

$(editor[i]).removeAttr('data-mce-style')​;​
FIDDLE

Try to use jQuery removeData():
$(editor[i]).removeData('mce-style');

you need to change/remove a particular attribute, for that you need to use
$(editor[i]).removeAttr('data-mce-style');
for more info check the following links:
http://api.jquery.com/removeAttr/
if you need to change the value of a particular attribute then do:
attr(attributeName, value);
for more info about the same check the following link:
http://api.jquery.com/attr/

Selecting custom data attributes in JQuery

I have a list here
<ul id="demo2" data-name="demo2">
<li data-value="here">here</li>
<li data-value="are">are</li>
<li data-value="some...">some</li>
<!-- notice that this tag is setting a different value :) -->
<li data-value="initial">initial</li>
<li data-value="tags">tags</li>
</ul>
Where each li item has a custom data attribute. On JQuery how would get all of the values of each li element which has an attribute of data-value? I want to get their value.
but this code of mine doesn't seem to be working
$('#view-tags').click(function(){
$('li[data-value]').each(function(){
alert($(this).data("value"));
})
});
The whole code on jsfiddle: http://jsfiddle.net/Zn3JA/

You are pretty close. You can use jQuery's .data() method to read attributes that start with data-. So in your case .data("value") since your attribute is data-value="some".
This should do it:
$('li[data-value]').each(function(){
alert($(this).data("value"));
});
Here is a working fiddle as well: http://jsfiddle.net/nuphP/

$(this).attr('data-value')
should also work.

You can use in your case:
jQuery(this).data("value");
in order to retrieve the value.

$(this) refers to the current li element hence you get the element alerted.
You can try what the others have suggested i.e $(this).data("value")

$('#view-tags').click(function(){
$('li[data-value]').each(function(){
var value = $(this).attr('data-value');
alert(value);
})
}); // this work normally
Takes the attribute value and stores the variable value
var value = $ (this) .attr ('date value');
After this warning the variable value
alert (value);