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

4 回答

• 30

  $("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 Selectors：contains是一个选择器

  这是关于:contains selector的信息

  回复于 2024-05-01T10:20:43+08:00
• 58

  jQuery UI 也有:data() selector，也可以使用 . 它似乎已经出现了Version 1.7.0 .

  你可以像这样使用它：

  Get all elements with a data-company attribute

  var companyElements = $("ul:data(group) li:data(company)");
  

  Get all elements where data-company equals Microsoft

  var microsoft = $("ul:data(group) li:data(company)")
                      .filter(function () {
                          return $(this).data("company") == "Microsoft";
                      });
  

  Get all elements where data-company does not equal 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") 的单页面应用程序 .

  回复于 2024-05-01T10:20:43+08:00
• 893

  Pure/vanilla JS solution （工作示例here）

  // 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 selector（目前为Level3）

  j3和Pure JS的 SPEED TEST （2018.06.29）：测试是在Chrome 67.0.3396.99（64位），Safari 11.0.3（13604.5.6），Firefox 59.0.2（64-）上的MacOs High Sierra 10.13.3上进行的位） . 下面的屏幕截图显示了最快浏览器（Safari）的结果：

  

  PureJS比jQuery快了大约12％在Chrome上，21％在Firefox上，25％在Safari上 . 有趣的是，Chrome的速度是每秒18.9M，Firefox 26M，Safari 160.9M（！） .

  So winner is PureJS 和最快的浏览器是 Safari （比Chrome快8倍！）

  在这里，您可以在您的机器上进行测试：https://jsperf.com/js-selectors-x

  回复于 2024-05-01T10:20:43+08:00
• 1

  jsFiddle Demo

  jQuery提供了几个selectors (full list)，以便使您正在寻找的查询工作 . 要解决您的问题"In other cases is it possible to use other selectors like "包含，小于，大于等... "."您还可以使用包含，开头和结束来查看这些html5数据属性 . 请参阅上面的完整列表，以查看所有选项 .

  上面已经介绍了基本的查询，并且使用John Hartsock的answer将是获得每个数据公司元素或获得除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>
  

  回复于 2024-05-01T10:20:43+08:00