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


636

我想知道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"
  • 在其他情况下,可以使用其他选择器,例如“包含,小于,大于等...”。

4
如果您在这里查看,您会发现所有需要的东西api.jquery.com/category/selectors :-)
艾伦·基默

Answers:


1004
$("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选择器的信息


这会工作吗?$('div[data-col="1"][data-row="2"]') 这将选择data-col等于1且data-row等于2的div,还是选择其中一个?
LuudJacobs 2012年

10
如果通过.data('something',value)设置数据,此方法是否可以工作?通常,在附加值时,这不会创建实际属性。我知道OP在属性方面非常具体,但我想我会提高认识,以防其他人对此选择器有疑问。
AaronLS 2013年

15
@AaronLS不,它不是(至少不是旧版本的jQuery,例如1.4.4)-您需要使用设置数据.attr('data-something', 'value')以查看HTML中的更新。按照stackoverflow.com/questions/6827810/...
马蒂Ĵ

没有在不键入data调用的情况下获取数据属性值的方法吗?
ahnbizcad 2014年

@gwho$('#element').data('something')
Gaui

69

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")这种方式或类似方式使用的单页应用程序来说,这很好。


我不明白你的意思。这对我来说很好用,并且我没有在js中引用其他数据。$('#id')。text($('#mydatasource')。data('empty')); 这将使用#mydatasource元素上的data-empty标签的内容填充#id元素。
放松在塞浦路斯,2014年

4
@FacebookAnswers您是否使用了:data()选择器或.data()方法?
2014年

我明白你的意思了。我正在使用该方法,而您的警告是指该方法。
放松在塞浦路斯,2014年

7
^你的意思是他的警告提到了选择者。
ahnbizcad 2014年

1
很奇怪,现在似乎可以与Jquery 3.3.1配合使用:jsfiddle.net/kai_noack/q6nzLs20/1
Kai Noack

39

jsFiddle Demo

jQuery提供了多个选择器(完整列表)以使您要查询的查询工作。解决您的问题“在其他情况下,可以使用其他选择器,例如“包含,小于,大于,等等...”。您还可以使用包含,开头和结尾来查看这些html5数据属性。请参阅上面的完整列表,以查看所有选项。

上面已经介绍了基本查询,使用John Hartsock答案将是获取每个data-company元素或获取除Microsoft(或Microsoft的任何其他版本: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>


6

纯/香草JS解决方案此处为工作示例)

// All elements with data-company="Microsoft" below "Companies"
let a = document.querySelectorAll("[data-group='Companies'] [data-company='Microsoft']"); 

// All elements with data-company!="Microsoft" below "Companies"
let b = document.querySelectorAll("[data-group='Companies'] :not([data-company='Microsoft'])"); 

querySelectorAll中,您必须使用有效的CSS选择器(当前为Level3

适用于jQuery和Pure JS的SPEED TEST(2018.06.29):测试是在MacOs High Sierra 10.13.3,Chrome 67.0.3396.99(64位),Safari 11.0.3(13604.5.6),Firefox 59.0.2(64)上进行的位)。下面的屏幕截图显示了最快的浏览器(Safari)的搜索结果:

在此处输入图片说明

在Chrome上,PureJS的速度比jQuery快12%,在Firefox上为21%,在Safari上为25%。有趣的是,Chrome的速度为每秒1890万次操作,Firefox为26M,Safari为160.9M(!)。

所以赢家是PureJS,最快的浏览器是Safari(比Chrome快8倍!)

在这里,您可以在计算机上执行测试:https : //jsperf.com/js-selectors-x

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.