La sélection de l'élément de données d'attribut

Question

Est-il facile et simple méthode pour sélectionner les éléments en fonction de leur data d'attribut? Par exemple, sélectionnez tous les points de contrôle qui comporte les données d'attribut nommé customerID qui a de la valeur de 22.

Je suis un peu hésitant à utiliser rel , ou d'autres attributs de stocker ces informations, mais j'ai beaucoup plus de mal à sélectionner un élément basé sur ce que sont les données qui y sont stockées.

Merci!

Answer 1

$('*[data-customerID="22"]');

Vous devriez être en mesure d'omettre l' *, mais autant que je me souvienne, en fonction de la version de jQuery que vous utilisez, cela pourrait donner défectueux résultats.

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

Aussi, si vous travaillez avec des attributs de données beaucoup dans vos scripts jQuery, vous pouvez envisager d'utiliser le HTML5 attributs de données personnalisés plugin. Cela permet d'écrire encore plus lisible le code à l'aide de .dataAttr('foo'), et les résultats dans un fichier de plus petite taille après la minification (comparé à l'utilisation d' .attr('data-foo')).

Answer 2

À l'aide de $('[data-whatever="myvalue"]') permettra de sélectionner quoi que ce soit avec les attributs html, mais dans les nouvelles jQueries il semble que si vous utilisez $(...).data(...) attacher des données, il utilise de la magie navigateur truc et n'affecte pas le html, donc n'est pas découvert par .find comme indiqué dans la réponse précédente.

Vérifier (testé avec la 1.7.2+) (voir aussi le violon): (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"]');

Answer 3

Pour sélectionner tous les points de contrôle avec l'attribut data en data-customerID==22, vous devez inclure l' a afin de limiter la portée de la recherche à ce seul type d'élément. Faire attribut de données recherche dans une grande boucle ou à haute fréquence lorsqu'il y a de nombreux éléments sur la page, il peut causer des problèmes de performance.

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