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);
Related
I have following code in Java script from which i have to need get the value on an inner attribute of <li>.
<li class="selected" data-val="1">
I have get the tag using
var a = document.getElementsByClassName('selected');
it is providing me <li> whole tag that is fine. But i have to need get the value of data-val attribute (which is within the <li>) that is 1.
How can i get the value of data-val using variable a that is defined.
Please explain..
Here a is a collection object so you need to get the element reference using index then use .getAttribute() to get the attribute value()
var a = document.getElementsByClassName('selected');
var val = a? a[0].getAttribute('data-val') : '';
//another option for modern browsers
// val = a[0].dataset.val
Since you have jQuery, you can use jQuery to select the element and then use data api like
var val = $('.selected').data('val')
With jQuery you can use $(a).attr("data-val").
Without jQuery you can use a.getAttribute("data-val")
Try this approach
var dataValValue = $(".selected").attr("data-val");
It will get data-val attribute from first li from all li with class .selected
There are two ways, using jQuery and the first returned element in a:
$.data(a[0],"val");
$(a[0]).data("val");
Both are equivalent. Sorry, they're not equivalent, since the first one is lower level, and does not process data-* attributes by itself.
There's no need to use .attr() since data-* attributes are processed automatically in the case of the second one.
Working a page of buttons which populates a textarea with the value of the buttons.
This works fine for items that are buttons, but cannot get it working for list items.
I have to use a list item since some buttons have a drop down.
jsfiddle shows the list item alerting 0 even thought it does have a value.
http://jsfiddle.net/hsw32zv8/
<li class='item_value' value='value'>
<a href='#'>Click</a>
</li>
<br><br>
<button type='button' class='btn btn-success item_value' value='value2'>Click 2</button>
jQuery:
$(".item_value").on('click',function(){
alert(this.value);
});
value is not a valid attribute for the li element (unless it's in an ol, but that seems unlikely given your issues and the fact the value of the attribute you had was a string not a number), nor does the DOMElement for that tag type have a value property.
Adding non-standard attributes to your markup will render the page invalid and may lead to JS and UI problems. If you want to create a custom attribute, use data-*:
<li class="item_value" data-value="value">
Click
</li>
$('.item_value').on('click', function(){
alert($(this).data('value')); // = 'value'
});
li element doesn't have value attribute. However if you still want to get it use attr method:
$( this ).attr( 'value' );
jsFiddle
A list item <li> haves a value but it only takes numbers (note they should be in an <ol>). You gave a string (at interpreted that as 0) so for example:
<li class='item_value' value='1010'>
Click
</li>
Will show up as a value of 1010. You can get around this by adding a data- attribute instead: data-value="someStringHere"
just modified your this.value to $(this).attr('value').
so the complete code:
$(".item_value").on('click',function(){
alert($(this).attr('value'));
});
hopefully helping
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'))
I am trying to add a data attribute with a value to a li, but for some reason its not working.
Iv done this before on divs but for some reason its not working correctly now.
Here is my jsfiddle http://jsfiddle.net/76MDE/1/
Here is my code.
<ul class="title-area">
<li class="name">
<h1>cool</h1>
</li>
</ul>
$('.name').data("element", "name");
.data() does not add the data-* attribute. It creates a jQuery object and it will be stored internally in a jQuery cache variable.
If you want to set the attribute you must use .attr()
$('.name').attr("data-element", "name");
Use this :
$('.name').attr("data-element", "name");
Demo
Fiddle
USE THIS
$('.name').attr("data", "element");
It IS working, as you can verify by putting a:
alert($('.name').data("element"));
It's only that the HTML is not modified.
If you want to see it in the HTML, too, use the following:
$('.name').attr("data-element", "name");
I have the following HTML:
<ul actualpage=0>
<li/>
<li/>
....
</ul>
<ul actualpage=0>
<li/>
<li/>
....
</ul>
Im trying to get the value of actualpage of each ul and create a new attribute. Its easy but not in one jquery sentence... Its possible? Until now i have the following line (between ## simbols the missing part that i need.
/*
select all uls with attribute actualpage and create a new attribute on each with the current actualpage value
*/
$('ul[actualpage]').attr('newactualpage',##Current value of actualpage attr of UL##);
Well maybe this isn't as nice as you'd like, but
$('ul[actualpage]').each(function(_, ul) { $(ul).attr('newactualpage', $(ul).attr('actualpage')); });
One might think that
$('ul[actualpage]').attr('newactualpage',$(this).attr('actualpage'))
is the answer.
However, this is evaluated before the call to attr, so it's going to equal whatever this equals in the calling context.
You could use:
$('ul[actualpage]').attr('newactualpage',function(){
return $(this).attr('actualpage');
});
or this:
$('ul[actualpage]').each(function()
{
$(this).attr('newactualpage',$(this).attr('actualpage'));
};
In both, this refers to the element that your selector matched.
You can use function as second argument for .attr(), eliminating the need of .each():
$('ul[actualpage]').attr('newactualpage', function() { return $(this).attr('actualpage') });