Jquery custom attribute access

Question

there is a div present in my js file

<div id="myid" data="mydata"></div>

when i try to access custom attribute data with pure javascript

var data  =  document.getElementById('myid').getAttribute('data');

jquery alone

 var data = $("#"+myid).attr('data');

above both mwthods are working properly but when i try to used the both jquery and javascript

var data = $("#"+myid).getAtrribute("data");

then is is giving error? but didn't able to get the reason ? can anyone explain please?

Really, you're suprised it doesn't work when you use a native javascript method on a jQuery object? Why would you even do that ? — adeneo
– adeneo, Commented Jan 13, 2015 at 8:19
i know its not appropriate but i was just keen to know the reason why this is not working. — ashishkumar148
– ashishkumar148, Commented Jan 13, 2015 at 8:22
FYI even completly unrelevant to issue, data isn't valid attribute for DIV element — A. Wolff
– A. Wolff, Commented Jan 13, 2015 at 8:23
It's not working because a jQuery object has no getAttribute property, it has it's own set of properties and methods, that are not at all related to what properties and methods a native DOM node would have. — adeneo
– adeneo, Commented Jan 13, 2015 at 8:27

Jai · Accepted Answer · 2015-01-13 08:25:09Z

4

You are applying a dom method to a jquery object which causes error instead jquery has a method to convert the selector to the dom element .get():

$("#"+myid).get(0).getAtrribute("data");

alert($('#myid').get(0).getAttribute('data'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="myid" data="mydata"></div>

As you are using a data attribute then better to use data-* attribute and jQuery has a method to get it with .data() method:

<div id="myid" data-mydata="CustomisedData"></div>

then in the jQuery:

$('#myid').data('mydata'); // will give you "CustomisedData"

edited Jan 13, 2015 at 8:25

answered Jan 13, 2015 at 8:20

Jai

74.8k12 gold badges77 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

dfsq · Accepted Answer · 2015-01-13 08:20:01Z

1

Because $("#"+myid) is a jQuery instance, not HTML Element object. So you can't use DOM methods on some arbitrary object.

jQuery instance object is an array-like collection of DOM elements. It means that you can extract individual DOM element from it by index if you really need. So in your case you could do this:

$("#" + myid)[0].getAtrribute("data");

jQuery also offers dedicated method for it $.fn.get:

$("#" + myid).get(0).getAtrribute("data");

answered Jan 13, 2015 at 8:20

dfsq

193k26 gold badges244 silver badges261 bronze badges

Comments

Bhojendra Rauniyar · Accepted Answer · 2015-01-13 08:18:17Z

0

This should work:

var data = $("#"+myid)[0].getAtrribute("data");

Because to use javascript code, you need to use DOM object but jQuery uses array-like collection object.

answered Jan 13, 2015 at 8:18

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

Collectives™ on Stack Overflow

Jquery custom attribute access

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related