web-dev-qa-db-ja.com

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"を持つすべての要素
  • 他の場合には、「含む、より小さい、より大きいなど」のような他のセレクタを使用することが可能です。
javascriptjqueryjquery-selectorscustom-data-attribute
587
Jose3d
$("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セレクタ ：に含まれるのはセレクタです

これは に関する情報です：セレクタを含む

935
John Hartsock

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";
                       });

etc ...

新しい:data()セレクタの注意点の1つは、選択するにはdata value by codeを設定する必要があることです。これは、上記が機能するためには、HTMLでdataを定義するだけでは不十分であることを意味します。あなたは最初にこれをしなければなりません：

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

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

64
rhughes

jsFiddle Demo

jQueryは、あなたが探しているクエリを機能させるために、いくつかの セレクタ（全リスト） を提供します。あなたの質問に答えるために{"他の場合には"含む、より小さい、より大きいなどのような他のセレクターを使うことが可能です。 "を使うこともできます。これらのhtml5データ属性を見てください。あなたの選択のすべてを見るために上の完全なリストを見なさい。

基本的な問い合わせは上でカバーされました、そして John Hartsock s answer を使用することはすべてのdata-company要素を得るために、またはマイクロソフト以外のすべてを得るために最善の策です。 :notのバージョン.

これをあなたが探している他のポイントに拡張するために、私たちはいくつかのメタセレクターを使うことができます。まず、複数のクエリを実行する予定がある場合は、親の選択をキャッシュするのがいいでしょう。

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

次に、このセットでGで始まる企業を探すことができます。

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

それともWordというソフトを含む会社

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>
34
Travis J

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）上のMacOs High Sierra 10.13.3でテストが行​​われましたFirefox 59.0.2（64ビット）下のスクリーンショットは最速ブラウザ（Safari）の結果を示しています。

enter image description here

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

4
Kamil Kiełczewski