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

10 浏览
0 Comments

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

我想知道HTML5提供哪些选择器用于这些数据属性。

以这段HTML为例：

 

 

 

 

是否有选择器来获取以下内容：

  • 所有带有data-company=\"Microsoft\"属性的元素，在\"Companies\"下面
  • 所有带有data-company!=\"Microsoft\"属性的元素，在\"Companies\"下面
  • 在其他情况下，是否可以使用其他选择器，如\"contains, less than, greater than, etc...\"。
admin 更改状态以发布 2023年5月22日
0

2 答案

0 Comments

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 值才能被选择。这意味着仅在HTML中定义 data 是不够的。你必须先这样做：

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

这对于单页面应用程序来说很好，因为你可能会在这种或类似方式中使用 $(...).data("datakey", "value")。

0
0 Comments 

$("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 是一种选择器

这里有关于 :contains 选择器 的信息

0