Question Sélecteurs jQuery sur les attributs de données personnalisés à l'aide de HTML5

jQuery UI a un :data() sélecteur qui peut également être utilisé. Il a été autour depuis Version 1.7.0 il semble.

Vous pouvez l'utiliser comme ceci:

Obtenez tous les éléments avec un data-company attribut

var companyElements = $("ul:data(group) li:data(company)");

Obtenez tous les éléments où data-company équivaut à Microsoft

var microsoft = $("ul:data(group) li:data(company)")
                    .filter(function () {
                        return $(this).data("company") == "Microsoft";
                    });

Obtenez tous les éléments où data-company n'est pas égal Microsoft

var notMicrosoft = $("ul:data(group) li:data(company)")
                       .filter(function () {
                           return $(this).data("company") != "Microsoft";
                       });

etc...

Une mise en garde de la nouvelle :data() le sélecteur est que vous devez définir la data valeur par code pour qu'il soit sélectionné. Cela signifie que pour que cela fonctionne, définir le data en HTML ne suffit pas. Vous devez d'abord faire ceci:

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

C'est bien pour les applications d'une seule page où vous êtes susceptible d'utiliser $(...).data("datakey", "value") de cette manière ou de manière similaire.

jsFiddle Demo

jQuery fournit plusieurs sélecteurs (liste complète) afin de faire les requêtes que vous cherchez un travail. Pour répondre à votre question "Dans d'autres cas, est-il possible d'utiliser d'autres sélecteurs comme" contient, moins de, plus grand que, etc ... "." vous pouvez également utiliser contains, commence par et se termine par pour regarder ces attributs de données html5. Voir la liste complète ci-dessus afin de voir toutes vos options.

L'interrogation de base a été couverte ci-dessus, et en utilisant John Hartsockde répondre va être le meilleur pari soit pour obtenir chaque élément de données-entreprise, ou pour obtenir tous sauf Microsoft (ou toute autre version de :not).

Afin de l'étendre aux autres points que vous recherchez, nous pouvons utiliser plusieurs méta-sélecteurs. Tout d'abord, si vous allez faire plusieurs requêtes, c'est bien de mettre en cache la sélection parente.

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

Ensuite, nous pouvons chercher des entreprises dans cet ensemble qui commencent par G

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

Ou peut-être des entreprises qui contiennent le mot doux

var microsoft = $('[data-company*="soft"]',group);//microsoft

Il est également possible d'obtenir des éléments dont les attributs de fin de l'attribut de données

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 solution (exemple de travail ici)

// 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'])"); 

Dans querySelectorAll vous devez utiliser valide Sélecteur CSS (actuellement Niveau 3)

TEST DE RAPIDITÉ (2018.06.29) pour jQuery et Pure JS: test effectué sur MacOs High Sierra 10.13.3 sur Chrome 67.0.3396.99 (64 bits), Safari 11.0.3 (13604.5.6), Firefox 59.0.2 (64 bits ). La capture d'écran ci-dessous montre les résultats du navigateur le plus rapide (Safari):

PureJS était plus rapide que jQuery: environ 12% sur Chrome, 21% sur Firefox et 25% sur Safari. Vitesse intéressant pour Chrome était de 18,9 M opération par seconde, Firefox 26M, Safari 160,9M (!).

Le gagnant est PureJSet le navigateur le plus rapide est Safari (plus de 8 fois plus rapide que Chrome!)

Ici vous pouvez effectuer un test sur votre machine: https://jsperf.com/js-selectors-x