使用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"元素data-company!="Microsoft"下的"Companies"

在其他情况下，是否可以使用其他选择器，如“包含，小于，大于等...”。

---

$("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值以供选择。 这意味着为了上述工作，用HTML定义data是不够的。 你必须先做到这一点：

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

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

---

jsFiddle Demo

jQuery提供了几个选择器（完整列表），以便使您正在查找的查询工作。 解决您的问题“在其他情况下，可以使用其他选择器，如”包含，小于，大于等等“。” 你也可以使用contains，begin和ends来查看这些html5数据属性。 查看上面的完整列表以查看所有选项。

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

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

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

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

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

或者也许包含单词软的公司

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>

链接地址: http://www.djcxy.com/p/10129.html

上一篇: jQuery selectors on custom data attributes using HTML5

下一篇: Behaviour of increment and decrement operators in Python