Selezione dell'elemento per attributo dei dati

Esiste un metodo semplice e diretto per selezionare gli elementi in base al loro dataattributo? Ad esempio, selezionare tutte le ancore con l'attributo di dati denominato customerIDche ha valore di 22.

Sono un po 'titubante da usare relo altri attributi per archiviare tali informazioni, ma trovo molto più difficile selezionare un elemento in base ai dati in esso memorizzati.

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

Dovresti essere in grado di omettere il *, ma se ricordo bene, a seconda della versione di jQuery che stai usando, questo potrebbe dare risultati errati.

Per compatibilità con l'API Selettori ( document.querySelector{,all}), in questo caso le virgolette attorno al valore dell'attributo ( 22) potrebbero non essere omesse .

Inoltre, se lavori molto con gli attributi dei dati negli script jQuery, potresti prendere in considerazione l'utilizzo del plug-in degli attributi dei dati personalizzati HTML5 . Ciò consente di scrivere un codice ancora più leggibile utilizzando .dataAttr('foo')e risulta una dimensione del file più piccola dopo la minimizzazione (rispetto all'utilizzo .attr('data-foo')).

Per le persone che cercano su Google e desiderano regole più generali sulla selezione con attributi di dati:

$("[data-test]")selezionerà qualsiasi elemento che ha semplicemente l'attributo di dati (indipendentemente dal valore dell'attributo). Compreso:

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

$('[data-test~="foo"]')selezionerà qualsiasi elemento in cui l'attributo di dati contiene foo ma non deve essere esatto, come ad esempio:

<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"]')selezionerà qualsiasi elemento in cui il valore esatto dell'attributo di dati è the_exact_value, ad esempio:

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

ma no

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

Usando $('[data-whatever="myvalue"]')si selezionerà qualsiasi cosa con attributi html, ma nei jQueries più recenti sembra che se si utilizza $(...).data(...)per allegare dati, utilizzi qualcosa del browser magico e non influisca sull'html, quindi non viene scoperto .findcome indicato nella risposta precedente .

Verifica (testato con 1.7.2+) (vedi anche violino ): (aggiornato per essere più completo)

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"]');

Non ho visto una risposta JavaScript senza jQuery. Spero che aiuti qualcuno.

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

elements[0].innerHTML = 'it worked!';

<a data-customerID='22'>test</a>

Informazioni:

• attributi di dati

• .querySelectorAll ();

Per selezionare tutte le ancore con l'attributo data data-customerID==22, è necessario includere il aper limitare l'ambito della ricerca solo a quel tipo di elemento. L'esecuzione di ricerche di attributi di dati in un ciclo di grandi dimensioni o ad alta frequenza quando ci sono molti elementi nella pagina può causare problemi di prestazioni.

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

Esempi nativi di JS

Ottieni NodeList di elementi

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

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

Ottieni il primo elemento

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

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

Targeting di una raccolta di nodi che restituisce un elenco di nodi

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

html:

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

Ottieni elementi in base a più valori di dati (OR)

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

html:

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

Ottieni elementi in base a valori di dati combinati (AND)

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

html:

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

Ottieni elementi in cui inizia il valore

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

tramite il metodo filtro Jquery ():

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

La costruzione in questo modo: $('[data-XXX=111]')non funziona in Safari 8.0 .

Se voi dati set di attributi in questo modo: $('div').data('XXX', 111), funziona solo se si imposta l'attributo dati direttamente nel DOM in questo modo: $('div').attr('data-XXX', 111).

Penso che sia perché il team jQuery ha ottimizzato il Garbage Collector per prevenire perdite di memoria e operazioni pesanti sulla ricostruzione del DOM su ogni attributo dei dati di modifica.

Perché ciò funzioni in Chrome, il valore non deve avere un'altra coppia di virgolette.

Funziona solo, ad esempio, in questo modo:

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

A volte è desiderabile filtrare gli elementi in base al fatto che abbiano elementi dati collegati in modo programmatico (ovvero non tramite attributi dom):

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

Quanto sopra funziona ma non è molto leggibile. Un approccio migliore consiste nell'utilizzare uno pseudo-selettore per testare questo genere di cose:

$.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";
    };
});

Ora possiamo riformattare l'affermazione originale in qualcosa di più fluente e leggibile:

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

Solo per completare tutte le risposte con alcune caratteristiche dello "standard di vita" - Ormai (nell'era html5) è possibile farlo senza librerie di terze parti:

• JS puro / semplice con querySelector (utilizza selettori CSS):
  • seleziona il primo in DOM: document.querySelector('[data-answer="42"],[type="submit"]')
  • seleziona tutto in DOM: document.querySelectorAll('[data-answer="42"],[type="submit"]')
• CSS puro / semplice
  • alcuni tag specifici: [data-answer="42"],[type="submit"]
  • tutti i tag con un attributo specifico: [data-answer]oinput[type]