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

Question

Je voudrais savoir ce que les sélecteurs sont disponibles pour ces données attributs qui viennent avec le HTML5.

Prenez ce morceau de code HTML comme par exemple:

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

Existe-il des sélecteurs pour obtenir:

• Tous les éléments de données de l'entreprise="Microsoft" en dessous de "Sociétés"
• Tous les éléments de données de l'entreprise!="Microsoft" ci-dessous "les Entreprises"
• Dans d'autres cas, est-il possible d'utiliser d'autres sélecteurs comme "contient, à moins que, plus 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"

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

voici les infos sur le :contient sélecteur

Answer 2

jQuery UI a :data() sélecteur qui peut également être utilisé. Il a été autour depuis la Version 1.7.0 , il me semble.

Vous pouvez l'utiliser comme ceci:

Obtenez tous les éléments avec un data-company d'attribut

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

Obtenez tous les éléments où l' 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ù l' 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 l' data de la valeur par le code pour qu'il soit sélectionné. Cela signifie que pour la ci-dessus pour le travail, la définition de l' data dans le HTML n'est pas assez. Vous devez tout d'abord faire ceci:

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

C'est très bien pour les single page applications où vous êtes susceptible d'utiliser $(...).data("datakey", "value") dans ce ou des moyens similaires.