698

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"
  • 他の場合には、「含む、より小さい、より大きいなど...」のような他のセレクターを使用することが可能です。
4

5 に答える 5

1095 
$("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セレクターに関する情報があります

于 2010-11-10T16:21:52.187 に答える
72

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

等...

新しいセレクターの注意点の1つは、選択するためにコードで値を:data()設定する必要があることです。これは、上記が機能するためには、HTMLでの定義だけでは不十分であることを意味します。最初にこれを行う必要があります：datadata

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

$(...).data("datakey", "value")これは、この方法または同様の方法で使用する可能性が高いシングルページアプリケーションには問題ありません。

于 2014-05-27T13:12:27.873 に答える
41

jsFiddle Demo

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

基本的なクエリについては上記で説明しました。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>

于 2015-04-27T22:03:02.480 に答える
7

純粋/バニラ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およびPureJSの速度テスト（2018.06.29）：テストはChrome 67.0.3396.99（64ビット）、Safari 11.0.3（13604.5.6）、Firefox 59.0.2（64 -少し）。以下のスクリーンショットは、最速のブラウザ（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

于 2018-06-29T09:22:44.043 に答える
0

一つは何ですか

$("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
}
于 2022-02-12T08:43:06.017 に答える