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

$("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 的信息

---

jQuery UI 有一个也可以使用的 :data() selector。它似乎从 Version 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";
                       });

ETC...

新的 :data() 选择器的一个警告是，您必须按代码设置 data 值才能被选中。这意味着要使上述内容起作用，在 HTML 中定义 data 是不够的。你必须首先这样做：

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

这适用于您可能以这种或类似方式使用 $(...).data("datakey", "value") 的单页应用程序。

---

jsFiddle Demo

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

上面已经介绍了基本查询，使用 John Hartsock 的 answer 将是获取每个 data-company 元素或获取除 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

//存储的选择器 var group = $('ul[data-group="Companies"]'); //data-company 以 G 开头 var google = $('[data-company^="G"]',group).css('color','green'); //data-company 包含软 var microsoft = $('[data-company*="soft"]',group).css('color','blue'); //data-company 以 book 结尾 var facebook = $('[data-company$="book"]',group).css('color','pink');

• 微软
• Google
• Facebook

---

Pure/vanilla JS 解决方案（工作示例 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）

jQuery 和 Pure JS 的速度测试 (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）的结果：

https://i.stack.imgur.com/fsNGo.png

PureJS 在 Chrome 上比 jQuery 快 12%，在 Firefox 上快 21%，在 Safari 上快 25%。有趣的是，Chrome 的速度为每秒 18.9M 操作，Firefox 为 26M，Safari 为 160.9M（！）。

所以赢家是 PureJS，最快的浏览器是 Safari（比 Chrome 快 8 倍以上！）

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

---

一件事是什么

$("ul[data-group='Companies'] li[data-company='Microsoft']") 
// Get all elements with data-company="Microsoft" below 
"Companies"

但是你可以发明你的选择器：

function a() {
    inner= $("ul[data-group='Companies']");
    h = // get first child of inner([ 0])
    var ret = [] 

    while (h.nextSibling()) {
        if (h.Company == "Microsoft") {
            ret.push(h)
        };
        h = h.nextSibling();
    }
    return ret
}

---