是否有一种简单而直接的方法来根据其data属性选择元素？例如，选择所有具有名为customerID的数据属性（其值为22）的锚。

我很犹豫地使用rel或其他属性来存储此类信息，但是我发现根据存储在其中的数据选择元素要困难得多。 >

评论

另请参阅stackoverflow.com/q/4191386/292060
这就是帮助我选择所有数据属性（无论值如何）的原因：$（'* [data-customerID]'）您可以将其与例如$（'* [data-customerID]'）。each（function（）{...}）;

#1 楼

$('*[data-customerID="22"]');


您应该可以省略*，但是如果我没记错的话，这取决于您使用的是哪个jQuery版本，这可能会产生错误的结果。

请注意，为了与Selectors API（document.querySelector{,all}）兼容，在这种情况下，可能不会省略属性值（22）周围的引号。

此外，如果您在jQuery脚本中经常使用数据属性，您可能要考虑使用HTML5自定义数据属性插件。这使您可以使用.dataAttr('foo')编写更具可读性的代码，并在缩小后产生较小的文件大小（与使用.attr('data-foo')相比）。

评论

请注意，自jQuery 1.4.3起，.data（'foo'）即可获取'data-foo'属性的值。另外，由于jQuery 1.6：.data（'fooBar'）获得属性'data-foo-bar'。

–詹姆斯·麦考马克（James McCormack）
2011年7月1日在14:49
@Zootius：是的，插件自述文件对此有一个注释：“从jQuery 1.4.3开始，.data（）默认映射到自定义data- *属性，从而使该插件变得多余。不过，它仍然可以用于旧版本的jQuery。”

–玛蒂亚斯·拜恩斯（Mathias Bynens）
2011年7月4日在17:23
那么一个发布jQuery 1.4.3的人如何通过其数据对象的值选择一个对象呢？让我在此示例中选择包含customerID等于22的数据的任何对象吗？

–旅行
13年4月24日在22:26
另外，如果您只对特定数据属性感兴趣，可以这样做：$（'[data-customerID]'）

–黑暗
2013年12月1日在16:12


如果data字段是由jquery设置的（使用.data（）），这是行不通的，对吗？

– Martin R.
17年5月14日在11:31

#2 楼

对于谷歌搜索人员，想要关于使用数据属性进行选择的更通用规则：

$("[data-test]")将选择仅具有数据属性的任何元素（无论该属性的值如何）。包括：

<div data-test=value>attributes with values</div>
<div data-test>attributes without values</div>



$('[data-test~="foo"]')将选择data属性包含foo但不必精确的任何元素，例如：

<div data-test="foo">Exact Matches</div>
<div data-test="this has the word foo">Where the Attribute merely contains "foo"</div>



$('[data-test="the_exact_value"]')将选择数据属性精确值为the_exact_value的任何元素，例如：

<div data-test="the_exact_value">Exact Matches</div>


但不是

<div data-test="the_exact_value foo">This won't match</div>


评论

好。请注意，〜=匹配空格分隔的单词，而* =匹配任何子字符串。

–山姆
16-4-16的2:50
那^字符呢？

– kuba44
17年8月21日在12:33
@ kuba44实际上，您也可以使用^，例如$（'[data-test ^ = foo]'），在这种情况下，您选择以foo开头的任何内容，例如
或
，而不是


– JDuarteDJ
19年2月8日在15:00


属性选择器的完整列表：drafts.c​​sswg.org/selectors-3/#attribute-selectors

–user1460043
19年2月22日在9:17
以下哪一项将被视为对生成的HTML进行过滤的更好行为？选项1：根据我拥有的数据创建唯一的dom元素ID（例如，产品ID）=> $（“＃product-$ {productID}”）选项2：将数据分配给数据属性，并基于该数据进行过滤= > $（“。product [data-productid ='$ {productID}'”“）（ps，由于stackoverflow的代码标记，我使用了引号而不是模板字面意义）

–奥马尔·鲁德（Omar Ruder）
10月26日11:14


#3 楼

使用$('[data-whatever="myvalue"]')会选择具有html属性的任何内容，但是在较新的jQueries中，似乎如果使用$(...).data(...)附加数据，它将使用一些魔术浏览器，并且不会影响html，因此.find不会发现它，如前一个答案所示。

验证（已通过1.7.2+测试）（另请参见小提琴）：（已更新为更完整）

评论

啊哈-原来有人指出这一点在stackoverflow.com/questions/4191386/…

–drzaus
2012年7月26日在16:03
并在这里提供.filter的解决方案

–drzaus
2012年7月26日16:09
它使用了一些神奇的浏览器，并不影响html：没有神奇的东西;）learningjquery.com/2011/09/using-jquerys-data-apis

–汤姆·萨杜（Tom Sarduy）
2012年11月22日在21:09
@TomSarduy：“任何足够先进的技术都无法与魔术区分开。”

–drzaus
13年1月13日在17:23


如果要添加稍后需要查找的数据属性，请使用$ item.attr（'data-id'，10）;。

–佩德罗·莫雷拉（Pedro Moreira）
2014年4月8日在9:16

#4 楼

没有jQuery，我还没有看到JavaScript答案。希望它能对某人有所帮助。




 var elements = document.querySelectorAll('[data-customerID="22"]');

elements[0].innerHTML = 'it worked!'; 

 <a data-customerID='22'>test</a>





信息：


数据属性


#5 楼

要选择所有具有数据属性data-customerID==22的锚点，应包括a以将搜索范围限制为仅该元素类型。当页面上有很多元素时，以大循环或高频搜索数据属性可能会导致性能问题。

$('a[data-customerID="22"]');


#6 楼

本机JS示例

获取元素的NodeList 

var elem = document.querySelectorAll('[data-id="container"]')


html：<div data-id="container"></div>

获取第一个元素

var firstElem = document.querySelector('[id="container"]')


html：<div id="container"></div>

定位返回节点列表的节点集合

document.getElementById('footer').querySelectorAll('[data-id]')



html：

<div class="footer">
    <div data-id="12"></div>
    <div data-id="22"></div>
</div>


基于多个（或）数据值获取元素

document.querySelectorAll('[data-section="12"],[data-selection="20"]')


html：

<div data-selection="20"></div>
<div data-section="12"></div>


基于组合（与）数据值获取元素

document.querySelectorAll('[data-prop1="12"][data-prop2="20"]')


html：

<div data-prop1="12" data-prop2="20"></div>


获取值开头为

document.querySelectorAll('[href^="https://"]')

的项目

评论

“获取第一个元素”的选择器是正确的，但与其他示例不一致—我认为它缺少“ data-”。

–GuyPaddock
3月20日23:13


#7 楼

这样的构造：$('[data-XXX=111]')在Safari 8.0中不起作用。

如果您以这种方式设置数据属性：$('div').data('XXX', 111)，则仅当您直接在DOM中设置数据属性（如$('div').attr('data-XXX', 111)）时才有效。

我认为这是因为jQuery团队优化了垃圾收集器，以防止每个更改数据属性上的内存泄漏和对DOM的繁重操作。

评论

这对我有很大帮助-如果我使用了data或prop方法，则$（'... [data-x =“ y”]'）的选择不起作用-我改用了attr（它将属性更改推送到DOM）。谢谢

–贾达（Jarda）
17年7月27日在10:25

#8 楼

通过Jquery filter（）方法：

http://jsfiddle.net/9n4e1agn/1/

HTML：

<button   data-id='1'>One</button>
<button   data-id='2'>Two</button>


JavaScript：

$(function() {    
    $('button').filter(function(){
        return $(this).data("id")   == 2}).css({background:'red'});  
     });


评论

你尝试过小提琴吗？ FIlter方法只是实现同一目标的另一种方法。当您已经有一组Jquery对象并且需要根据数据属性或其他任何内容进行过滤时，它会很有用。

–拉赞·保罗（Razan Paul）
2015年7月20日在22:53


我很抱歉，@暴雪。我对错误的答案发表了评论。现在将其粘贴到右侧。 #AlwaysALongDayAtWork

– Peter B
15年7月21日在14:45

#9 楼

为了使此功能在Chrome中起作用，该值不得包含另外一对引号。

它只能像这样运行：

$('a[data-customerID=22]');


评论

这似乎是不正确的。至少现在是不正确的。我刚刚使用$（'[data-action =“ setStatus”]'）。removeClass（'disabled'）;在Chrome中运行完美。

– Peter B
15年7月21日在14:45
我猜选择器内部没有使用“”，它可以用作$（'[data-action = setStatus]'）。removeClass（'disabled'）

–Animesh Singh
17年5月27日下午4:53

#10 楼

有时需要根据元素是否以编程方式附加到数据项来过滤元素（也就是不通过dom属性）：

$el.filter(function(i, x) { return $(x).data('foo-bar'); }).doSomething();


以上方法有效，但并非如此非常可读。更好的方法是使用伪选择器来测试这种事情：

$.expr[":"].hasData = $.expr.createPseudo(function (arg) {
    return function (domEl) {
        var $el = $(domEl);
        return $el.is("[" + ((arg.startsWith("data-") ? "" : "data-") + arg) + "]") || typeof ($el.data(arg)) !== "undefined";
    };
});


现在我们可以将原始语句重构为更流利和更易读的内容：

$el.filter(":hasData('foo-bar')").doSomething();


评论

第一个解决方案错过了return语句，它需要是：$ el.filter（function（i，x）{return $（x）.data（'foo-bar'）;}）。doSomething（）;

–萨尔玛·戈马（Salma Gomaa）
17年8月10日在8:05

#11 楼

只需使用“生活标准”的某些功能来完成所有答案-到现在（在html5-era中），无需第三方库即可完成此操作：


pure / plain JS with querySelector（使用CSS选择器）：


在DOM中选择第一个：document.querySelector('[data-answer="42"],[type="submit"]')

在DOM中选择全部：document.querySelectorAll('[data-answer="42"],[type="submit"]')



纯/纯CSS


一些特定的标签：[data-answer="42"],[type="submit"]

所有具有特定属性的标签：[data-answer]或input[type]





本文标签： jquery html custom-data-attribute
将div垂直居中放置在另一个div中[重复]
Ruby和号冒号快捷方式[重复]
最近发表
随机文章