使用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

Pure / vanilla 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）：測試是在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（！）。

因此，贏家是PureJS ，最快的瀏覽器是Safari （比Chrome快8倍！）

在這里，您可以在您的機器上執行測試： https ： //jsperf.com/js-selectors-x