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

我想知道 HTML5 随附的这些数据属性有哪些选择器。

以这段 HTML 为例：

<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"所有元素
在其他情况下，可以使用其他选择器，例如 “包含，小于，大于，等等...”。

答案

$("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 选择器：包含一个选择器

这是有关：contains 选择器的信息

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 数据属性。请参阅上面的完整列表，以查看所有选项。

上面已经介绍了基本查询，使用John Hartsock的答案将是获取每个 data-company 元素或获取除 Microsoft（或其他任何版本的:not ）之外的每个元素的最佳选择。

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

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

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

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

或包含 “soft” 一词的公司

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

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

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>