web-dev-qa-db-fra.com

Sélection élément par attribut de données

Existe-t-il une méthode simple et directe pour sélectionner des éléments en fonction de leur attribut data? Par exemple, sélectionnez toutes les ancres ayant un attribut de données nommé customerID qui a pour valeur 22. 

J’hésite un peu à utiliser rel ou d’autres attributs pour stocker de telles informations, mais j’ai beaucoup plus de difficulté à sélectionner un élément en fonction des données qui y sont stockées.

jqueryhtml5custom-data-attribute
894
Hazem Salama
$('*[data-customerID="22"]');

Vous devriez pouvoir omettre le *, mais si je me souviens bien, selon la version de jQuery que vous utilisez, cela pourrait donner des résultats erronés.

Notez que pour des raisons de compatibilité avec l’API des sélecteurs (document.querySelector{,all}), les guillemets autour de la valeur de l’attribut (22) ne peuvent pas être omis dans ce cas .

De même, si vous utilisez beaucoup d’attributs de données dans vos scripts jQuery, vous pouvez envisager d’utiliser le plugin HTML5 pour attributs de données personnalisés . Cela vous permet d'écrire du code encore plus lisible à l'aide de .dataAttr('foo') et d'obtenir une taille de fichier plus petite après la minification (par rapport à l'utilisation de .attr('data-foo')).

1321
Mathias Bynens

Pour les personnes cherchant sur Google et souhaitant des règles plus générales sur la sélection avec des attributs de données:

$("[data-test]") sélectionnera tout élément ne contenant que a l'attribut data (quelle que soit la valeur de l'attribut). Comprenant:

<div data-test=value>attributes with values</div>
<div data-test>attributes without values</div>

$('[data-test~="foo"]') sélectionnera n'importe quel élément pour lequel l'attribut de données contient foo mais ne doit pas être exact, tel que:

<div data-test="foo">Exact Matches</div>
<div data-test="this has the Word foo">Where the Attribute merely contains "foo"</div>

$('[data-test="the_exact_value"]') sélectionnera tout élément pour lequel la valeur exacte de l'attribut de données est the_exact_value, par exemple:

<div data-test="the_exact_value">Exact Matches</div>

mais non

<div data-test="the_exact_value foo">This won't match</div>
269
JTG

Utiliser $('[data-whatever="myvalue"]') sélectionnera tout ce qui a des attributs html, mais dans les nouvelles jQueries, il semble que si vous utilisez $(...).data(...) pour attacher des données, il utilise un navigateur magique et n’affecte pas le html. Par conséquent, .find ne le découvre pas, comme indiqué dans le fichier précédent. réponse .

Verify (testé avec 1.7.2+) (voir aussi fiddle ): (mis à jour pour être plus complet)

var $container = $('<div><div id="item1"/><div id="item2"/></div>');

// add html attribute
var $item1 = $('#item1').attr('data-generated', true);

// add as data
var $item2 = $('#item2').data('generated', true);

// create item, add data attribute via jquery
var $item3 = $('<div />', {id: 'item3', data: { generated: 'true' }, text: 'Item 3' });
$container.append($item3);

// create item, "manually" add data attribute
var $item4 = $('<div id="item4" data-generated="true">Item 4</div>');
$container.append($item4);

// only returns $item1 and $item4
var $result = $container.find('[data-generated="true"]');
129
drzaus

Pour sélectionner toutes les ancres avec l'attribut de données data-customerID==22, vous devez inclure la variable a afin de limiter la portée de la recherche à ce type d'élément uniquement. Effectuer des recherches d'attributs de données dans une grande boucle ou à une fréquence élevée lorsque de nombreux éléments se trouvent sur la page peut entraîner des problèmes de performances.

$('a[data-customerID="22"]');
60
Travis J

Je n'ai pas vu de réponse JavaScript sans jQuery. Espérons que cela aide quelqu'un.

var elements = document.querySelectorAll('[data-customerID="22"]');

elements[0].innerHTML = 'it worked!';
<a data-customerID='22'>test</a>

Info:

47
SPottuit

via la méthode Jquery filter ():

http://jsfiddle.net/9n4e1agn/1/

HTML:

<button   data-id='1'>One</button>
<button   data-id='2'>Two</button>

JavaScript:

$(function() {    
    $('button').filter(function(){
        return $(this).data("id")   == 2}).css({background:'red'});  
     });
12
Razan Paul

La construction comme celle-ci: $('[data-XXX=111]') ne fonctionne pas dans Safari 8.0 . 

Si vous définissez l'attribut de données de la manière suivante: $('div').data('XXX', 111), cela ne fonctionne que si vous définissez l'attribut de données directement dans le DOM comme ceci: $('div').attr('data-XXX', 111).

Je pense que c’est parce que l’équipe jQuery a optimisé le collecteur de mémoire pour éviter les fuites de mémoire et les opérations lourdes sur la reconstruction DOM sur chaque attribut de données de modification.

10
Anton Danilchenko

Pour que cela fonctionne dans Chrome, la valeur doit pas avoir une autre paire de guillemets. 

Cela ne fonctionne que, par exemple, comme ceci:

$('a[data-customerID=22]');
9
user55318

Il est parfois souhaitable de filtrer les éléments en fonction de leur attachement à des éléments de données par programmation (autrement dit pas via les attributs dom):

$el.filter(function(i, x) { return $(x).data('foo-bar'); }).doSomething();

Ce qui précède fonctionne mais n'est pas très lisible. Une meilleure approche consiste à utiliser un pseudo-sélecteur pour tester ce genre de chose:

$.expr[":"].hasData = $.expr.createPseudo(function (arg) {
    return function (domEl) {
        var $el = $(domEl);
        return $el.is("[" + ((arg.startsWith("data-") ? "" : "data-") + arg) + "]") || typeof ($el.data(arg)) !== "undefined";
    };
});

Maintenant, nous pouvons reformuler la déclaration originale en quelque chose de plus fluide et lisible:

$el.filter(":hasData('foo-bar')").doSomething();
4
XDS

Juste pour compléter toutes les réponses avec quelques caractéristiques du 'niveau de vie' - A présent (dans l'ère HTML5), il est possible de le faire sans bibliothèque tierce:

  • jS pur/simple avec querySelector (utilise les sélecteurs CSS):
    • sélectionnez le premier dans DOM: document.querySelector('[data-answer="42"],[type="submit"]')
    • sélectionner tout dans DOM: document.querySelectorAll('[data-answer="42"],[type="submit"]')
  • cSS pur/simple
    • des tags spécifiques: [data-answer="42"],[type="submit"]
    • toutes les balises avec un attribut spécifique: [data-answer] ou input[type]
0
Sven