How can I access current html elements certain property value? - javascript

This is my js/jquery code in which I am trying to access the current button that was clicked, with class of delete, and then get the property data-id's value. When I console.log the string that I hope to have it says undefined?
Any suggestions on what I am doing wrong?
$(".delete").click(function(){
var id = $(this).prop("data-id");
console.log(id);
});

Since data-* is an attribute you need to use attr()
var id = $(this).attr("data-id");
or you can get data-* attribute value using data()
var id = $(this).data("id");

Try the attr() method.
var id = $(this).attr("data-id");

The shortest would be:
$(".delete").on('click', function(){
var id = $(this).data("id");
console.log(id);
});

Try
$('.delete').on('click',function(){
var id= $(this).attr('data-id');
console.log(id);
})

Related

How to get id from html using Jquery?

My code has been given below . Why i am getting undefined? Please help me out.
//HTML is here
<input type="hidden" id="element_id">
//Jquery code is here
$('#student_update_form').on('submit', function(event) {
event.preventDefault();
var id = $(this).attr("element_id");
alert(id);
});
Short answer: just
$('#element_id').attr('id')
To selects a single element with the given id attribute:
$('#id')
it equivalent to document.getElementById() in Javascript: https://api.jquery.com/id-selector/
To 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.
.attr()
https://api.jquery.com/attr/
You get undefined because
$(this) does not refer to <input type="hidden" id="element_id">, it refer to the form has id='student_update_form'
and this form does not has an attribute named: element_id, so js return undefined
You can try:
var id = $('#element_id').attr('id');
alert(id);
$('#student_update_form').on('submit', function(event) {
event.preventDefault();
var id = $("#element_id").val();
alert(id);
});
There's no need to use attr, you can use id directly.

Getting child id using jQuery

How can I retrieve this Id using jQuery?
<span data-itemkey="40e1eec6-f949-468e-8a25-ba97d0ec3fb2" class="word">
<div class="additionalStyling green" id="2">Approval Process</div>
</span>
I tried this which returns undefined
$(document).on("click", ".word", function (e) {
var id = $(".word:first-child").attr("id");
}
Change this:
var id = $(".word:first-child").attr("id");
To:
var id = $(this).find("> div").first().attr("id");
Just to make sure, I am not copying the same one:
var id = $(this).children().first().attr('id');
As there will be multiple elements with class .word, $('.word') will return a set of elements.
Use
$(this) // The element that is clicked
.children() // Get all direct descendants
.first() // Get first element from it
.attr('id'); // Get the `id` attribute value
children accepts a selector so you can make the above shorter thus:
$(document).on("click", ".word", function (e) {
var id = $(this).children(':first').attr('id');
}
Try:
$(document).on("click", ".word", function (e) {
var id = $(this).find('[id]').attr('id');
});

Selecting a value from a custom property in javascript

I want to select a value and store it into a variable. Here is how it looks like:
My link
not I want to do smth like this:
$('a').on(click, function(){
var videoId = a[video-id].val();
});
output should be :
console.log(videoId);
somevalue
Update
video-id="this is changeable"
you need to put a and click in quotes. You can use .attr() or .data() to get the desired attribute value'
Using .attr()
$('a').on('click', function(){
var videoId = $(this).attr('video-id');
alert(videoId);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My link
Using .data()
To use .data() you have to prefix you attribute with data e.d data-id instead of video-id
$('a').on('click', function(){
var videoId = $(this).data('id');
alert(videoId);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
My link
You can either use:
var videoId = a.attr("video-id");
Or, better stick with data-* attributes and give:
My link
var videoId = a.data("video-id");
And please change:
$(a)
// to
$("a")

Parameters and JQuery

I have a few name elements in a html document that i want to pass to the jquery function assigned to a variable named "elements"
I want to assign the value of the clicked elements ID to the variable x.
I am new to JQuery can somebody help me please.
var elements = document.getElementsByName('color');
$(elements).click(function() {
x = $(this).id;
});
$('#color').click(function() {
x = $(this).attr('id');
});
$(function(){
var x;
$('[name="color"]').on('click', function(){
x = $(this).attr('id');
alert(x);
});
});
Check jsFiddle
You dont want to use jquery with javascript DOM Objects you've already gotten. You can grab the objects as Jquery objects with the class selector.
$('.color').click(function() {
x = this.id;
alert(x);
});
Here is a http://jsfiddle.net/2gmM3/
Try this:
$('html').on('click', '[name="color"]', function(){
var x = $(this).attr('id');
})

store HTML tag attribute value in a variable using Jquery

I am developing an application using JQuery. This is a fragment of the HTML code I am using:
<MarkNag class="altcheckboxoff" id="markable_38" Azpimark_id="100038">helburua </MarkNag>
<MarkNag class="altcheckboxoff" id="markable_2" Azpimark_id="100002">Oriolek </MarkNag>
<MarkNag class="altcheckboxoff" id="markable_39" Azpimark_id="100039">gas liberalizazioa </MarkNag>
I have the next JQuery script in the HTML page:
<script type='text/javascript'>
$("MarkNag").click(function (){
$(this).toggleClass("highlight");
});
</script>
I would like to know how could I store "markable_39" in a variable if this MarkNag tag was clicked. I guess I should use .data(). But I dont really know how. Any ideas? Thanks
Do it like this
$("MarkNag").click(function ()
{
$(this).toggleClass("highlight");
var IdOfTag = this.id;
//or
IdOfTag = $(this).attr('id');
});
Also, you can just use this.id,
like:
var id = this.id;
Actually, the correct code would be $(this).attr("id").
$("MarkNag").click(function (){
$(this).toggleClass("highlight");
alert(this.id); // Method 1: this.id
alert($(this).attr('id')); // Method 2: $(this).attr('id')
});
here u will get object from where the event occurs
var eventobject = arguments.callee.caller.arguments[0];
here u can access any attribute of currentTarget (in this case id)
var id = $(eventobject.currentTarget).attr("id");

Categories

Resources