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

javascript jquery jquery-selectors custom-data-attribute

2022-08-29 22:34:00

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

以这段 HTML 为例：

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

是否有选择器可以获得：

所有元素如下data-company="Microsoft""Companies"
所有元素如下data-company!="Microsoft""Companies"
在其他情况下，是否可以使用其他选择器，例如“包含，小于，大于等...”。

答案 1

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

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

答案 2

jQuery UI有一个:d ata（）选择器，也可以使用。它似乎从1.7.0版本开始就已经存在了。

你可以这样使用它：

获取具有数据公司属性的所有元素

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

获取数据公司等于微软的所有元素

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

获取数据公司不等于微软的所有元素

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

等。。。

新选择器的一个警告是，必须通过代码设置值才能选择它。这意味着要使上述内容正常工作，在HTML中定义是不够的。您必须首先执行以下操作：:data()datadata

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

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