Sélecteurs jQuery sur les attributs de données personnalisés utilisant HTML5

Question

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

de prendre ce morceau de code HTML comme exemple:

<ul data-group="Companies"> 
    <li data-company="Microsoft"></li> 
    <li data-company="Google"></li> 
    <li data-company ="Facebook"></li> 
</ul> 

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

Answer 1

$("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 pour jQuery Selectors: contient est un sélecteur

ici est d'info sur le :contains selector

Answer 2

jQuery UI a une :data() selector 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 attribut data-company

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

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

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

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

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

etc ...

Une mise en garde du nouveau sélecteur :data() est que vous devez définir la valeur datapar code pour qu'il être 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"); 

Ceci est très bien pour les applications d'une seule page où vous êtes susceptibles d'utiliser $(...).data("datakey", "value") de cette façon ou similaires.

Answer 3

jsFiddle Demo

jQuery fournit plusieurs selectors (full list) afin de rendre les questions que vous êtes à la recherche d'un emploi. Pour répondre à votre question "Dans d'autres cas, est-il possible d'utiliser d'autres sélecteurs comme" contient, inférieur à, supérieur à, etc ... "." vous pouvez également utiliser contient, commence par, et se termine avec 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 de answerJohn Hartsock va être le meilleur pari soit obtenir tous les éléments de données entreprise, ou pour obtenir tous sauf Microsoft (ou toute autre version de :not).

afin d'étendre cela aux autres points que vous Nous cherchons, nous pouvons utiliser plusieurs méta-sélecteurs Premièrement, si vous allez faire plusieurs requêtes, il est bon 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 les entreprises qui contiennent le mot doux

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

Il est également possible d'obtenir des éléments dont les données d'attributs de matchs se terminant

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>