I'm new in jquery. How can I get name,ID or class name an element with jquery.I'm trying as;
<div class="className" onclick="getname();"></div>
<div id="idName" onclick="getName();"></div>
<div name="attrName" onclick="getName()"></div>
function getName(){
attrName = $(this).attr("name");
alert(attrName);
}
but doesn't work
Try this:
JavaScript
$(function () {
$('div').click(function () {
var elem = $(this);
alert('Class: ' + elem.attr('class'));
alert('Id: ' + elem.attr('id'));
alert('Name: ' + elem.attr('name'));
});
});
HTML
<div class="className" onclick="getname();"></div>
<div id="idName" onclick="getName();"></div>
<div name="attrName" onclick="getName()"></div>
CSS
div {
width: 100px;
height: 100px;
border: 1px solid black;
}
JSfiddle: http://jsfiddle.net/54ynV/
In the script above we're attaching to the click event of every div on the page $('div').click.... In the callback we're getting it's attributes.
Firstly using jQuery you should attach click() handlers rather than use antiquated onclick attributes. Then you can use the this keyword in the manner you have in your function.
Try this:
<div class="className"></div>
<div id="idName"></div>
<div name="attrName"></div>
$(function() {
$("div").click(function() {
var name = this.name;
var cls = this.className;
var id= this.id;
alert("Name: " + name + " / Class: " + cls + " / Id: " + id);
});
});
The attributes you've selected are all available through POJS, you could also convert this to a jQuery object to get other attributes, for example:
var title = $(this).attr('title');
var myattribute = $(this).data('myattribute'); // using HTML5: <div data-myattribute="foo"></div>
var three times (twice more than necessary), using name twice and not using this.className?
attr() to demonstrate, will make a note.
this.name is undefined, at least on Chrome; this.getAttribute('name') gives the expected value.You need to pass a reference to the element you want to get the name attribute of. Try this:
jQuery
function getName(me) {
attrName = $(me).attr("name");
alert(attrName);
}
HTML
<div class="className" onclick="getname(this);">a</div>
<div id="idName" onclick="getName(this);">b</div>
<div name="attrName" onclick="getName(this)">c</div>
Now you should get the name of the last element since that's the only element that has a name. The others will return undefined.
