web-dev-qa-db-fra.com

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

J'aimerais savoir quels sélecteurs sont disponibles pour ces attributs de données fournis avec HTML5.

En 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 à obtenir:

  • Tous les éléments avec data-company="Microsoft" sous "Companies"
  • Tous les éléments avec data-company!="Microsoft" sous "Companies"
  • Dans d'autres cas, il est possible d'utiliser d'autres sélecteurs tels que "contient, inférieur à, supérieur à, etc ...".
javascriptjqueryjquery-selectorscustom-data-attribute
599
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"

Regardez dans sélecteurs jQuery : contient est un sélecteur

voici des informations sur le : contient le sélecteur

953
John Hartsock

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

Vous pouvez l'utiliser comme ceci:

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

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

Obtenir tous les éléments où data-company est égal à Microsoft

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

Obtenir 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 ...

Un inconvénient du nouveau sélecteur :data() est que vous devez définir la valeur data par le code pour qu'il soit sélectionné. Cela signifie que pour que ce qui précède fonctionne, il ne suffit pas de définir data en HTML. Vous devez d'abord faire ceci:

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

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

66
rhughes

jsFiddle Demo

jQuery fournit plusieurs sélecteurs (liste complète) afin de répondre aux requêtes que vous recherchez. Pour répondre à votre question "Dans d'autres cas, est-il possible d'utiliser d'autres sélecteurs tels que" contient, inférieur à, supérieur à, etc ... "." , vous pouvez également utiliser contient, commence par, et finit par 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é traitée ci-dessus, et l'utilisation de John Hartsock 's answer sera le meilleur choix pour obtenir chaque élément de la société de données, ou pour obtenir chaque élément. sauf Microsoft (ou toute autre version de _:not_).

Afin d'étendre ceci aux autres points que vous recherchez, nous pouvons utiliser plusieurs méta-sélecteurs. Premièrement, si vous voulez effectuer plusieurs requêtes, il est agréable de mettre en cache la sélection parent.

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

Ensuite, nous pouvons rechercher des entreprises de cet ensemble qui commencent par G

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

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

_var Microsoft = $('[data-company*="soft"]',group);//Microsoft
_

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

_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>_
37
Travis J

Solution JS Pure/Vanilla (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 une validité sélecteur CSS (actuellement niveau )

TEST DE VITESSE (2018.06.29) pour jQuery et Pure JS: le test a été 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):

enter image description here

PureJS était plus rapide que jQuery: environ 12% sur Chrome, 21% sur Firefox et 25% sur Safari. Fait intéressant, la vitesse pour Chrome était de 18,9 millions d’opérations par seconde, Firefox 26M, Safari 160,9M (!).

Donc, le gagnant est PureJS et 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

6
Kamil Kiełczewski