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


636

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

4
Si vous regardez ici, vous trouverez tout ce dont vous avez besoin api.jquery.com/category/selectors :-)
Allan Kimmer Jensen

Réponses:


1005
$("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


Est-ce que ça va marcher? $('div[data-col="1"][data-row="2"]') Cela sélectionnera-t-il le div où data-col est égal à 1 et data-row est égal à 2, ou sélectionnera-t-il l'un ou l'autre?
LuudJacobs

10
Est-ce que cela fonctionnera si les données sont définies via .data («quelque chose», valeur)? Souvent, cela ne crée pas un attribut réel lors de l'attachement de la valeur. Je sais que l'OP était assez spécifique en ce qui concerne les attributs, mais j'ai pensé que je sensibiliserais au cas où d'autres auraient des problèmes avec ce sélecteur.
AaronLS

15
@AaronLS Non, ce n'est pas le cas (du moins pas avec les anciennes versions de jQuery, par exemple 1.4.4) - vous devez définir les données en utilisant .attr('data-something', 'value')pour voir la mise à jour dans le HTML. Selon stackoverflow.com/questions/6827810/…
Matty J

N'y a-t-il pas un moyen d'obtenir des valeurs d'attribut de données sans taper datal'appel?
ahnbizcad

@gwho$('#element').data('something')
Gaui

69

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.


Je n'ai pas votre mise en garde. Cela fonctionne bien pour moi, et je ne fais aucune autre référence aux données dans le js. $ ('# id'). text ($ ('# mydatasource'). data ('empty')); Cela remplira l'élément #id avec le contenu de la balise vide de données sur l'élément #mydatasource.
Se détendre à Chypre le

4
@FacebookAnswers Avez-vous utilisé le :data()sélecteur ou la .data()méthode?
rhughes

Je vois ce que tu veux dire. J'utilisais la méthode, alors que votre mise en garde faisait référence à la méthode.
Détente à Chypre

7
^ vous voulez dire que sa mise en garde faisait référence au sélecteur.
ahnbizcad

1
Bizarre, il semble maintenant fonctionner dans le violon avec Jquery 3.3.1: jsfiddle.net/kai_noack/q6nzLs20/1
Kai Noack

39

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>


6

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):

entrez la description de l'image ici

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

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.