J'aimerais savoir quels sélecteurs sont disponibles pour ces attributs de données fournis avec HTML5.
Prenant ce morceau de HTML comme exemple:
<ul data-group="Companies">
<li data-company="Microsoft"></li>
<li data-company="Google"></li>
<li data-company ="Facebook"></li>
</ul>
Y a-t-il des sélecteurs pour obtenir:
- Tous les éléments avec
data-company="Microsoft"
au dessous de "Companies"
- Tous les éléments avec
data-company!="Microsoft"
au dessous de "Companies"
- Dans d'autres cas, est-il possible d'utiliser d'autres sélecteurs comme "contient, inférieur à, supérieur à, etc ...".
$("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"
Regardez dans Sélecteurs jQuery : contient est un sélecteur
voici des informations sur le : contient un sélecteur
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