javascript - jquery选择器获取HTML5的自定义数据属性

  显示原文与译文双语对照的内容

我想知道哪些选择器可以用于HTML5的这些数据属性。

以这一段HTML为例:


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

是否有选择器可以供选择:

  • 所有带有 data-company="微软"的元素"公司""
  • 所有带有 data-company ="微软"的元素"公司"" !
  • 在其他情况下,可以使用像"包含,小于,大于,等等 。"这样的选择器。
时间:


$("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 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

于work,相关jQuery提供了几个选择器( 完整列表) 为了使查询你是 looking. 在这些 html 5 数据attributes,来解决你的问题 "在其他情况下,是否可以使用其他选择器"包含,小于,大于等- -"。"你也可以使用包含,通过去除,而且结尾以 look. 查看上面的完整列表以查看你的所有选项。

使用的基本查询上面已经涵盖了,和约翰 Hartsock解答是的将是最好的选择到或者获得每个data-company元素,或者来获得每一个素描除了微软( 或者任何其他版本的: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>
...