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
Related
I try to get the value of the input id="registration_type"
I type on console:
$('#registration_type')
then it will appear:
<input id="registration_type" name="contact_registration[type]" type="hidden" value="ContactRegistration">
I want to get the value only which is "ContactRegistration"
How will I do that on JQuery?
You need to use
$('#registration_type').val();
USE .val() Method of jQuery:
$('#registration_type').val()
DEMO
you are missing val() of jquery .
$('#registration_type').val();
$('#registration_type').value;
If you can get it as whole object, it means you are able to access its property.
using $('#registration_type') you get dom element. Now from this element you can fetch any property or function.
for value of $('#registration_type') you need to
$('#registration_type').val()
here's the snippet of code I have:
$(".block").mouseover(function() {
$("#block_title").html("title"));
});
Each div of class .block has a data-title attribute (value of each data-title attribute is different). I want to be able to access this data-title attribute inside my anonymous function.
You can access it using the .data method:
$(".block").mouseover(function() {
...
$("#block_title").html($(this).data('title'));
});
You can use the .data() function in jQuery
$(".block").mouseover(function() {
$("#block_title").html($(this).data('title'));
});
You may be referring to this code.
$('.block').attr('data-title', 'This is a random value');
According to the jQuery API documentation:
Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
I hope this answers your question.
If you mean you have an HTML5 data- attribute:
$(".block").mouseover(function() {
$("#block_title").html( $(this).attr("data-title") ); //data-title value
});
Or, if you mean you have a title property in the jQuery arbitrary data:
$(".block").mouseover(function() {
$("#block_title").html( $(this).data("title") ); //title value in the data object
});
Is it possible to read a value from an element like this for ie
<div id="element" winner="first"></div>
So i can get the "first" value from winner?
Thanks in advance
You can, but you should use data attributes to store custom data:
<div id="element" data-winner="first"></div>
Now, you can use the .data() method:
$('#element').data('winner'); // "first"
If you can't use data attributes, you can use the .attr() method:
$('#element').attr('winner'); // "first"
var winner = $("#element").attr('winner');
If you have control over the markup, I would suggest not to make up your own attributes. Instead, use HTML5 data-* attributes.
I am trying to use
$(this).parentNode.attr('data-element')
which should return 0 - 5 in string but it just won't work. I am using it in a function like this
$('.someClass').each(function(){
$(this).html(SomeFunction('SomeString', $(this).parentNode.attr('data-element')));
});
All the elements with class 'someClass' have a parentNode
<li class="element" data-element: 1 (or any number from 0 to 5 (including))> </li>
and I have no idea where is the mistake. What am I doing wrong?
--David
You are mixing jQuery and plain javascript in the same line of code and that will not work. You can either use:
$(this).parent().attr('data-element'); // jQuery
or
this.parentNode.getAttribute("data-element"); // plain javascript
parentNode is not a property of a jQuery object, so you can't mix the two the way you were doing it. The jQuery method for getting the parent is .parent().
You should do
$(this).parent().attr('data-element')
because you can't call attr() on a non jQuery object
Try doing this instead:
$(this).parent().attr('data-element');
For more information on functions like .parent() see the Traversing section of the JQuery documentation:
http://api.jquery.com/category/traversing/
Using jquery it should be:
$(this).parent().attr('data-element');
Without using jquery this would be:
this.parentNode.getAttribute("data-element")
I prefer to use:
var item = $(this);
var parent = item.closest(".element"); //using the class for selection
//and then use parent.attr('data-element')
I am already using id and title but i need to parse through 2 more bits...
$(this).attr("title"); $(this).attr("id");
Will $(this).attr("custom1"); work ??
yes, and BTW you can set multiple attributes at once:
$('.myselector').attr({
src: 'thefile.gif',
width: 200,
height: 300 });
Yes, and you can use it for all of the data-attributes in HTML5. Which is the preferrable way to add extra attributes.
Additionally, all data-* attributes are automatically added to jQuery's data() object for easy access
If you just want to associate (by name) some data with a DOM element, you're better off using the ".data()" method:
$(this).data('custom1', someValue);
The ".data()" API makes HTML5-style "data-foo" attributes coded into the HTML accessible:
var foo = $(this).data('foo'); // gets the "data-foo" attribute value from element
Yes it works, but it's not a good idea.
Better use .data('foo', 'bar'); if you want to store some data on an element.
Yes, and the best thing you can do is just test it.
<script>
$(document).ready(function() {
// Handler for .ready() called.
alert( "custom1 = " + $("#myField").attr("custom1") );
});
</script>
<div id="myField" custom1="My Custom Field"></div>
Now, you are breaking markup, so I would suggest storing your info in ALT tags or NAME tags to prevent that ().