自定义数据属性上的jQueryselect器使用HTML5

我想知道哪些select器可用于HTML5随附的这些数据属性。

以这段HTML为例：

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

有没有select器得到：

• 在"Companies"下面的data-company="Microsoft"所有元素
• 所有元素与data-company!="Microsoft"下面的"Companies"
• 在其他情况下，是否可以使用其他select器，如“包含，小于，大于等…”。

Answer 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" 

查看jQueryselect器 ：contains是一个select器

这里是包含select器的信息

Answer 2

jQuery UI有一个:data()select器 ，也可以使用。 从版本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()select器是你必须通过代码设置data值来select它。 这意味着为了上面的工作，用HTML定义data是不够的。 你必须先做到这一点：

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

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

Answer 3

jsFiddle Demo

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

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

为了扩展到你正在寻找的其他点，我们可以使用几个元select器。 首先，如果您要执行多个查询，那么caching父级select是很好的。

 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>