Come ottenere, impostare e selezionare elementi con attributi dati?

Question

Sto avendo qualche problema con data-attributi, non riesco a ottenere qualcosa a lavorare per qualche motivo quindi devo fare qualcosa di sbagliato:

Set:

$('#element').data('data1', '1'); //Actually in my case the data is been added manually 

fa che fanno la differenza ?

Get:

$('#element').data('data1'); 

Seleziona:

$('#element[data1 = 1]') 

Niente di tutto questo funziona per me, sto facendo questo o come è?

Answer 1

Tutte le risposte sono corretto, ma voglio dire qualcosa che nessun altro ha fatto.
Il metodo jQuery data si comporta come un getter per gli attributi di dati html5, ma il setter non modifica l'attributo data- *.
Quindi, Se è stato aggiunto manualmente i dati (come si afferma nel tuo commento), quindi è possibile utilizzare un selettore di attributo CSS per selezionare il vostro elemento:

$('#element[data-data1=1]') 

ma se hai aggiunto (alterata) i dati tramite jQuery, quindi la soluzione di cui sopra non funzionerà.
Ecco un esempio di questo fallimento:

var div = $('<div />').data('key','value'); 
alert(div.data('key') == div.attr('data-key'));// it will be false 

Quindi la soluzione è quella di filtrare la raccolta controllando il valore dei dati jQuery per abbinare quello desiderato:

// replace key & value with own strings 
$('selector').filter(function(i, el){ 
    return $(this).data('key') == 'value'; 
}); 

Così, al fine di superare questi problemi, è necessario utilizzare gli attributi HTML5 set di dati (attraverso attr methos di jQuery) come getter e setter:

$('selector').attr('data-' + key, value); 

oppure è possibile utilizzare un'espressione personalizzata che filtra jQuery interna data:

$.expr[':'].data = function(elem, index, m) { 
    // Remove ":data(" and the trailing ")" from the match, as these parts aren't needed: 
    m[0] = m[0].replace(/:data\(|\)$/g, ''); 
    var regex = new RegExp('([\'"]?)((?:\\\\\\1|.)+?)\\1(,|$)', 'g'), 
    // Retrieve data key: 
    key = regex.exec(m[0])[2], 
    // Retrieve data value to test against: 
    val = regex.exec(m[0]); 
    if (val) { 
     val = val[2]; 
    } 
    // If a value was passed then we test for it, otherwise we test that the value evaluates to true: 
    return val ? $(elem).data(key) == val : !!$(elem).data(key); 
}; 

e usarlo come:

$('selector:data(key,value)') 

Answer 2

Si utilizza selettore di ID in modo non v'è alcuna necessità di utilizzare selettore di attributo, come dati è una proprietà e si sta impostando utilizzando data metodo (non il metodo attr) non è possibile selezionare l'elemento con selettore di attributo, se si desidera selezionare l'elemento solo se ha data1 === 1 è possibile utilizzare il metodo filter:

(function($){ 
    $(function(){ 
     // ... 
     $('#element').filter(function() { 
      return this.dataset.data1 == 1 
      // return $(this).data('data1') == 1 
     }) 
    }) 
})(jQuery); 

dataset: Consente l'accesso, sia in modalità di lettura e scrittura, per tutti gli attributi di dati personalizzati (dati- *) insieme sull'elemento È una mappa di DOMString, una voce per ogni attributo di dati personalizzato.

Answer 3

per riflettere i valori degli attributi subito nel DOM è possibile utilizzare .attr()

$('#element').attr('data-data1', '1'); // Sets the attribute 

$('#element[data-data1="1"]') // Selects the element with data-data1 attribute' 

$('#element').data('data1'); // Gets the value of the attribute 

$('#element').attr('data-data1'); // Gets the value of the attribute 

In pianura JavaScript si può provare questo

var elem = document.getElementById('element'); 

elem.setAttribute('data-data1', '1'); // Set the attribute 

elem.getAttribute('data-data1'); // Gets the attribute 

Answer 4

// Set 
$('#element').attr('data-value', 'value'); 
// Get 
var value = $('#element').attr('data-value'); 
// Select 
var elem = $('#element[data-value = "' +value+ '"]');