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


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

Je suis un peu hésitant à utiliser rel ou d'autres attributs pour stocker ces informations, mais je trouve qu'il est beaucoup plus difficile de sélectionner un élément en fonction des données qui y sont stockées.


832
2018-03-21 16:13


origine


Réponses:


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

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

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

En outre, si vous travaillez beaucoup avec les attributs de données dans vos scripts jQuery, vous pouvez envisager d'utiliser le Plugin d'attributs de données personnalisées HTML5. Cela vous permet d'écrire du code encore plus lisible en utilisant .dataAttr('foo'), et résulte en une taille de fichier plus petite après minification (par rapport à l'utilisation .attr('data-foo')).


1227
2018-03-21 16:14



Pour les gens googling et veulent des règles plus générales sur la sélection avec des attributs de données:

$("[data-test]") sélectionnera tout élément simplement a l'attribut de données (peu importe 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 tout élément où l'attribut de données contient  foo mais ne doit pas être exacte, comme:

<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 où 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>

234
2018-03-07 20:03



En utilisant $('[data-whatever="myvalue"]') va sélectionner n'importe quoi avec des attributs html, mais dans les plus récentes jQueries, il semble que si vous utilisez $(...).data(...) pour joindre des données, il utilise quelque chose de navigateur magique et n'affecte pas le code HTML, donc n'est pas découvert par .find comme indiqué dans le réponse précédente.

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

119
2017-07-26 15:57



Pour sélectionner toutes les ancres avec l'attribut de données data-customerID==22, vous devriez inclure a limiter la portée de la recherche à seulement ce type d'élément. Faire des recherches d'attribut de données dans une grande boucle ou à haute fréquence quand il y a beaucoup d'éléments sur la page peut causer des problèmes de performance.

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

57
2017-09-23 16:53



Je n'ai pas vu de réponse JavaScript sans jQuery. J'espère que ça aide quelqu'un.

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

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

Info:


41
2017-12-29 14:44



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'});  
     });

11
2017-07-08 23:26



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

Si vous définissez l'attribut de données de cette façon: $('div').data('XXX', 111), cela ne fonctionne que si vous définissez l'attribut de données directement dans DOM comme ceci: $('div').attr('data-XXX', 111).

Je pense que c'est parce que l'équipe de jQuery a optimisé le garbage collector pour empêcher les fuites de mémoire et les opérations lourdes sur la reconstruction DOM sur chaque attribut de données de changement.


9
2017-10-27 09:13



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

Cela fonctionne seulement, par exemple, comme ceci:

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

8
2017-12-28 15:48



Exemples JS natifs

Obtenir NodeList d'éléments

var elem = document.querySelectorAll('[data-id="container"]')

html: <div data-id="container"></div>

Obtenez le premier élément 

var firstElem = document.querySelectorAll('[id="container"]')[0]

html: <div id="container"></div>

Cibler une collection de nœuds qui renvoie une nodeliste

document.getElementById('footer').querySelectorAll('[data-id]')

html:

<div class="footer">
    <div data-id="12"></div>
    <div data-id="22"></div>
</div>

Obtenir des éléments en fonction de plusieurs valeurs de données (OR)

document.querySelectorAll('[data-section="12"],[data-selection="20"]')

html:

<div data-selection="20"></div>
<div data-section="12"></div>

Obtenir des éléments basés sur des valeurs de données combinées (AND)

document.querySelectorAll('[data-prop1="12"][data-prop2="20"]')

html:

<div data-prop1="12" data-prop2="20"></div>

Obtenir des éléments où la valeur commence par

document.querySelectorAll('[href^="https://"]')

8
2017-11-15 07:53