HTML5を使用したカスタムデータ属性のjQueryセレクター

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"
• 他の場合では、「含む、より小さい、より大きいなど」などの他のセレクターを使用できます。

$("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はセレクターです

これは：containsセレクターに関する情報です

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()セレクターの1つの注意点は、コードを選択するためにコードでdata値を設定する必要があることです。つまり、上記が機能するためには、HTML でを定義するだけでは不十分です。最初にこれを行う必要があります。data

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

これは$(...).data("datakey", "value")、この方法または類似の方法で使用する可能性が高い単一ページアプリケーションに適しています。

jsFiddle Demo

jQueryは、探しているクエリを機能させるために、いくつかのセレクター（完全なリスト）を提供します。「他のケースでは、「含む、より小さい、より大きいなど...」のような他のセレクターを使用することは可能ですか？」という質問に対処します。これらのhtml5データ属性を調べるために、contains、starts with、endsを使用することもできます。すべてのオプションを確認するには、上記の完全なリストを参照してください。

基本的なクエリについては上記で説明しました。JohnHartsockの回答を使用すると、すべての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

//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>

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セレクタ（現在はレベル3を）

jQueryおよびPure JSの速度テスト（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よりも高速で、Chromeでは約12％、Firefoxでは21％、Safariでは25％でした。興味深いことに、Chromeの速度は1秒あたり18.9M、Firefox 26M、Safari 160.9M（！）でした。

つまり、勝者はPureJSであり、最速のブラウザはSafariです（Chromeの8倍以上高速です！）。

ここで、マシンでテストを実行できます：https : //jsperf.com/js-selectors-x