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

Je voudrais savoir quels sélecteurs sont disponibles pour ces attributs de données fournis avec HTML5.

Prenons 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>

Existe-t-il des sélecteurs pour obtenir:

• Tous les éléments avec data-company="Microsoft"ci-dessous"Companies"
• Tous les éléments avec data-company!="Microsoft"ci-dessous"Companies"
• Dans d'autres cas, est-il possible d'utiliser d'autres sélecteurs comme "contient, moins que, plus grand que, 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"

Rechercher dans les sélecteurs jQuery : contient est un sélecteur

voici des informations sur le : contient le sélecteur

jQuery UIa un :data()sélecteur qui peut également être utilisé. Il existe depuis la version 1.7.0 , semble-t-il.

Vous pouvez l'utiliser comme ceci:

Obtenez tous les éléments avec un data-companyattribut

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

Obtenez tous les éléments à data-companyégalitéMicrosoft

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

Récupère tous les éléments où data-companyn'est pas égalMicrosoft

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

etc...

Une mise en garde du nouveau :data()sélecteur est que vous devez définir la datavaleur par code pour qu'il soit sélectionné. Cela signifie que pour que ce qui précède fonctionne, la définition datade HTML n'est pas suffisante. Vous devez d'abord faire ceci:

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

C'est très 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 d'effectuer les requêtes que vous recherchez. Pour répondre à votre question "Dans d'autres cas, est-il possible d'utiliser d'autres sélecteurs comme" contient, moins que, plus grand que, etc ... "." vous pouvez également utiliser contient, commence par et se termine par pour examiner ces attributs de données html5. Consultez la liste complète ci-dessus afin de voir toutes vos options.

L'interrogation de base a été abordée ci-dessus, et l'utilisation de la réponse de John Hartsock sera la meilleure solution pour obtenir tous les éléments de la société de données ou pour tous, sauf Microsoft (ou toute autre version de :not).

Afin d'étendre cela aux autres points que vous recherchez, nous pouvons utiliser plusieurs méta-sélecteurs. Tout d'abord, si vous allez effectuer plusieurs requêtes, il est préférable de mettre en cache la sélection parent.

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

Ensuite, nous pouvons rechercher 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 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>

Solution JS pure / vanille (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 un sélecteur CSS valide (actuellement Level3 )

SPEED TEST (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 -bit). La capture d'écran ci-dessous montre les résultats du navigateur le plus rapide (Safari):

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

Le gagnant est donc 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