I have this code
var elem = document.getElementById('EMM');
<span id="EMM" data-var="MM"></span>
Problem is I want to access the value of data-var attribute in elem in JavaScript, something like elem.attributevalue('data-var')
Use getAttribute
var elem = document.getElementById('EMM');
alert(elem.getAttribute('data-var'));
<span id="EMM" data-var="MM"></span>
Related
I would like to get the value of the href i.e. the web link using the data attribute.
I have the following snippet of code
<div class="my-item-details">
<h3 class="my-item-title" data-item_item="x12">
<a href="http://link.com">
My Classic Box
</a>
</h3>
<span class="my-item-price" data-item_item="x12">
38.00
</span>
</div>
The following 2 snippets give the right output.
var price_val = $('.my-item-price[data-item_uuid=x12]').text();
price_val = $.trim(price_val)
console.log(price_val);
38.00
var item_name = $('.my-item-title[data-item_uuid=x12]').text();
item_name = $.trim(item_name)
console.log(item_name);
My Classic Box
However when I run this code
var item_link = $('.my-item-title[data-item_uuid=x12]').attr("href");
item_link = $.trim(item_link)
console.log(item_link);
I get an empty string instead of http://link.com
What am I missing?
.my-item-title[data-item_uuid=x12] selects the h3 element, which doesn't have an href attribute.
Only the a element has that.
Add a descendant combinator and a type selector:
.my-item-title[data-item_uuid=x12] a
You are trying to get the attribute href from a <h3> element without href property:
You could make a change on your selector this way to get the correct result:
var item_link = $('.my-item-title[data-item_uuid=x12] > a').attr("href");
This should give you the correct value.
I have the following jquery code :
$j = jQuery.noConflict();
function displaySelected(elem){
var value = $j(elem).find(".columnToHide").html();
console.log(value);
}
The out put of this is : <div class="hiddenId" data="a05o000000V88VFAAZ"></div>.
However, I would like to only get the value in the data tag i.e. the id. I know you can do something like this..
.html("<div class='hiddenId' data='a05o000000V88VAAAZ'></div>")
but this doesn't strip the tags. Any help please
Use jquery's .attr() method. So: $j(elem).find(".columnToHide").attr("data")
Use jQuery's data method to retrieve the value. (Your data attribute should probably take the form of data-name if you have control over that.)
This line will drill down to the content you want:
$(value).attr('data')
To put in context of the rest of your script:
$j = jQuery.noConflict();
function displaySelected(elem){
var value = $j(elem).find(".columnToHide").html();
console.log($(value).attr('data')); // a05o000000V88VAAAZ
}
$j = jQuery.noConflict();
function displaySelected(elem) {
var value = $j(elem).find(".columnToHide").attr("data");
console.log(value);
}
How can I select html tag after using jquery function called .first() ?
HTML
<html>
<head> </head>
<body>
<div>
<a>
<img id="#hello">
</a>
</div>
<div></div>
</body>
</html>
JS (JQuery)
var elemFirst = $(div).first();
var selectImg = elemFirst.$('img#hello');
// var selectImg = elemFirst.find('img'); <- It working but I want to select manual
selectImg.addClass('some-css');
With Respect
You can use $('child','parent') selector,
var elemFirst = $('div').first();
var selectImg = $('#hello',elemFirst); //or just $('img',elemFirst);
Also, your id has a #, it should be just id="hello".
If you need to keep this value in Id, use
var selectImg = $('img[id="#hello"]',elemFirst);
You can use find():
var selectImg = elemFirst.find('img#hello');
But you have an id of the image, so, you just can do this:
$('img#hello')
Because id is unique.
Use find()
elemFirst.find('img#hello');
This will search for direct and nested elements with the provided selector.
Alternatively, you can do
$('div:first #hello')
or even just
$('#hello')
since you are using an id which should be unique.
As in html the id be unique in html so striaghtly write
$("#\\#hello").addClass('some-css');
or
var selectImg = elemFirst.find('img[id="#hello"]');
Fiddle
I'm trying to get the id of an input using jquery. What I do is I get the id of a button I click, then I concatenate the string to get the id of the element I want to have. But when I get the var picloc to show, it says undefined. How do I get the id of the hidden input?
$('.photo-frame').click(function (){
var id = this.id;
var picloc = $('#'+id+'_location').val();
$('#picture-selected').html(id);
});
<span class="photo-frame" id="<?php echo $filetitle2;?>">
</span>
<input id="<?php echo $filetitle2;?>_location" type="hidden">
If the hidden element is just the next of span in DOM then You can use following script.
$('.photo-frame').click(function (){
var hidden_element = $(this).next('input:hidden').val();
});
Try this:
$('.photo-frame').click(function (){
var id = $(this).attr('id');
var picloc = $('#'+id+'_location').val();
$('#picture-selected').html(id);
});
var id = this.id;
has some problems.
this refers to the document's itself. You should surround it with a $() in order to point the clicked element. And I do not know if [object].id is usable.
Change the line as the following.
var id = $(this).attr('id');
Are you sure to use the above block of codes inside the $(document).ready(function(){ ... }); or the page itself.
You can try this:
var currentId = $('#element').attr('id');
This will only work provided that you have a valid jQuery object $(this), eg:
var currentId = $(this).attr('id');
Using the following code:
<div class="whatever" addthis:title="Hi, your name is [firstName]"></div>
If I have a JS variable like this
var name = John
How would I replace the "[firstName]" with my JS variable in the first code snippet using jQuery?
It's ok if I need to set the attribute using jQuery to begin with like:
$('.whatever').attr( 'addthis:title', 'Hi, your name is [firstName].' );
Simply run replace on your string...:
var name = 'John';
$('.whatever').attr('addthis:title', function(i, attr){
return attr.replace('[firstName]', name);
});
P.S. Are you sure you want an attribute addthis:title, not simply title? That's invalid HTML! If you want to create your own attributes, prefix them with data-:
<div class="whatever" data-addthis-title="Hi, your name is [firstName]"></div>
Did you try it? Your example code contains all the pieces you need.
var name = "John";
var element = $('.whatever');
var newAttrValue = element.attr('addthis:title').replace(/\[firstName\]/, name);
element.attr('addthis:title', newAttrValue);