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

Question

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

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"

查看jQuery选择器:contains是一个选择器

这是关于:包含选择器的信息

Answer 2

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")这种或类似方式使用的单页应用程序.

Answer 3

jsFiddle Demo

jQuery提供了几个选择器(完整列表),以便使您正在寻找的查询工作.解决你的问题"在其他情况下,可以使用其他选择器,如"包含,小于,大于等......".您还可以使用contains,starts with和ends来查看这些html5数据属性.请参阅上面的完整列表,以查看所有选项.

上面已经介绍了基本查询,并且使用John Hartsock的答案将是获得每个数据公司元素或获得除Microsoft(或任何其他版本:not)之外的每个元素的最佳选择.

为了将其扩展到您正在寻找的其他点,我们可以使用多个元选择器.首先,如果您要进行多个查询,那么缓存父选择会很好.

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

接下来,我们可以在这个集合中寻找以G开头的公司

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

或者也许包含soft这个词的公司

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>

Answer 4

纯/香草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