使用HTML5自定义数据属性的jQuery选择器

我想知道哪些选择器可用于HTML5附带的这些数据属性。

以这段超文本标记语言为例：

<ul data-group="Companies">
<li data-company="Microsoft"></li>
<li data-company="Google"></li>
<li data-company ="Facebook"></li>
</ul>

是否有选择器要获取：

  • "Companies"下面data-company="Microsoft"的所有元素
  • "Companies"下面data-company!="Microsoft"的所有元素
  • 在其他情况下，可以使用其他选择器，例如“包含、小于、大于等”。
763209 次浏览
小开
最佳答案 
$("ul[data-group='Companies'] li[data-company='Microsoft']") //Get all elements with data-company="Microsoft" below "Companies"


$("ul[data-group='Companies'] li:not([data-company='Microsoft'])") //get all elements with data-company!="Microsoft" below "Companies"

查看jQuery选择器：包含是一个选择器

这里是关于：包含选择器的信息

小开

jQuery UI有一个:data()选择器也可以使用。它似乎从版本1.7.0开始就存在了。

你可以像这样使用它：

获取具有data-company属性的所有元素

var companyElements = $("ul:data(group) li:data(company)");

获取data-company等于Microsoft的所有元素

var microsoft = $("ul:data(group) li:data(company)")
.filter(function () {
return $(this).data("company") == "Microsoft";
});

获取data-company不等于Microsoft的所有元素

var notMicrosoft = $("ul:data(group) li:data(company)")
.filter(function () {
return $(this).data("company") != "Microsoft";
});

等…

新的:data()选择器的一个警告是，您必须设置data值通过代码才能选择它。这意味着要使上述工作正常，仅用超文本标记语言定义data是不够的。您必须首先执行此操作：

$("li").first().data("company", "Microsoft");

这对于您可能以这种或类似方式使用$(...).data("datakey", "value")的单页应用程序来说是很好的。

小开

jsFiddle Demo

jQuery提供了几个选择器（完整列表）以使您正在寻找的查询有效。为了解决您的问题“在其他情况下，是否可以使用其他选择器，例如“包含、小于、大于等……”。”，您还可以使用包含、开头和结尾来查看这些html5数据属性。请参阅上面的完整列表以查看您的所有选项。

上面已经介绍了基本的查询，使用johnhartsock的回答将是获取每个数据公司元素的最佳选择，或者获取除Microsoft（或任何其他版本的:not）之外的每个元素。

为了将其扩展到您正在寻找的其他点，我们可以使用几个元选择器。首先，如果您要执行多个查询，缓存父选择是很好的。

var group = $('ul[data-group="Companies"]');

接下来，我们可以在这个集合中寻找以G开头的公司

var google = $('[data-company^="G"]',group);//google

或者可能包含软一词的公司

var microsoft = $('[data-company*="soft"]',group);//microsoft

也可以获取其data属性的结尾匹配的元素

var facebook = $('[data-company$="book"]',group);//facebook


//stored selector
var group = $('ul[data-group="Companies"]');


//data-company starts with G
var google = $('[data-company^="G"]',group).css('color','green');


//data-company contains soft
var microsoft = $('[data-company*="soft"]',group).css('color','blue');


//data-company ends with book
var facebook = $('[data-company$="book"]',group).css('color','pink');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul data-group="Companies">
<li data-company="Microsoft">Microsoft</li>
<li data-company="Google">Google</li>
<li data-company ="Facebook">Facebook</li>
</ul>

小开

纯/香草JS解决方案（工作示例这里）

// All elements with data-company="Microsoft" below "Companies"
let a = document.querySelectorAll("[data-group='Companies'] [data-company='Microsoft']");


// All elements with data-company!="Microsoft" below "Companies"
let b = document.querySelectorAll("[data-group='Companies'] :not([data-company='Microsoft'])");

在查询选择全部中，您必须使用有效的css选择器（当前为三级）

速度测试（2018.06.29）for jQuery and Pure JS：测试在MacOs High Sierra 10.13.3上执行，Chrome67.0.3396.99（64位），Safari11.0.3（13604.5.6），Firefox 59.0.2（64位）。下面的屏幕截图显示了最快浏览器（Safari）的结果：

在此处输入图片描述

PureJS在Chrome上比jQuery快约12%，在Firefox上为21%，在Safari上为25%。有趣的是，Chrome的速度是每秒18.9M操作，Firefox26M，Safari160.9M（！）。

获胜者是PureJS和最快的浏览器是Safari（比Chrome快8倍以上！）

在这里您可以在您的机器上执行测试：https://jsperf.com/js-selectors-x


提交答案