JQuery - get value of data attribute of element in selector, not in attr

Question

I am always looking for a shorter and faster way of making jQuery selections, and I wondered if there is a shorter way to select the value of the data attribute of a given element. Now I have this

const phoneCode = $('#loginCountryCodeInput').attr('data-phone-code');

to get the value of this data attribute

<input id="loginCountryCodeInput" data-phone-code="+1">

Is there a shorter selector, something like this?

const phoneCode = $('#loginCountryCodeInput[data-phone-code]');

Answer 1

Use data() method to get custom data-* attribute value.

$('#loginCountryCodeInput').data('phone-code');

---

FYI : There is no way to get the value by a selector, which generates a jQuery object.

---

There are some difference between the methods : jQuery Data vs Attr?

Answer 2

You can have .data() function for that

$("#controlid").data("phone-code");

Answer 3

Yes there is. It's almost like the one you wrote, but you need to use $("#id-of-element[property='value']"). E.g.: $("#loginCountryCodeInput[data-phone-code='+1']")

Source documentation: https://api.jquery.com/attribute-equals-selector/

Answer 4

try this. there any other answer available. take which one best suite for you.

document.querySelectorAll('[data-phone-code="+1"]');
$('a[data-phone-code=+1]');