JQuery - 获取选择器中元素的数据属性值，而不是attr

Question

我一直在寻找一种更短，更快的方式来进行jQuery选择，我想知道是否有更短的方法来选择给定元素的data属性的值。现在我有了这个

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

获取此数据属性的值

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

是否有更短的选择器，像这样？

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

Answer 1

使用data()方法获取自定义data-*属性值。

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

<小时/> 仅供参考：无法通过生成jQuery对象的选择器获取值。 这些方法之间存在一些差异：jQuery Data vs Attr?

Answer 2

您可以拥有.data()功能

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

Answer 3

是的。它几乎就像你写的那个，但你需要使用$("#id-of-element[property='value']")。 例如：$("#loginCountryCodeInput[data-phone-code='+1']")

来源文档：https://api.jquery.com/attribute-equals-selector/

Answer 4

试试这个。还有其他答案。为你选择最合适的套房。

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