Jak zdobyć, ustawić i wybrać elementy z atrybutami danych?

Question

Mam pewne problemy z danymi-atrybutów, nie mogę dostać coś do pracy z jakiegoś powodu tak muszę robić coś źle:

Set:

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

Czy to czyni różnicę ?

otrzymujemy:

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

Wybierz:

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

Nic z tego nie działa na mnie, ja zmyślam czy jak to jest?

Answer 1

Wszystkie odpowiedzi są poprawne, ale chcę powiedzieć coś, czego nikt inny nie zrobił.
Metoda jQuery data działa jak getter dla atrybutów danych html5, ale ustawnik nie zmienia atrybutu data- *.
Tak więc, jeśli ręcznie dodane dane (jak wskazano w komentarzu), a następnie można użyć selektora atrybutu css, aby wybrać element:

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

ale jeśli zostały dodane (zmieniony) dane poprzez jQuery, powyższe rozwiązanie nie będzie działać.
Oto przykład tego niepowodzenia:

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

Więc rozwiązaniem jest czasowe gromadzenie sprawdzając wartość danych jQuery dopasować żądaną jeden:

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

Tak więc, w celu przezwyciężenia tych kwestie, trzeba użyć atrybutów html5 zestawu danych (poprzez jQuery za attr Methos) jako pobierające i ustawiające:

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

lub użyć niestandardowego wyrażenie, które filtruje jQuery wewnętrzny 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); 
}; 

i używać go lubię:

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

Answer 2

Używasz selektor identyfikatora, więc nie ma potrzeby korzystania selektor atrybutu, jak dane jest własnością i ustawiania go za pomocą data metodę (nie atr metody) nie można wybrać element przy użyciu selektor atrybutu, jeśli ciebie aby wybrać element tylko wtedy, gdy ma data1 === 1 można użyć metody filter:

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

dataset: umożliwia dostęp, zarówno w trybie odczytu i zapisu, aby wszystkie dane atrybuty niestandardowe (data- *) zestaw na elemencie. Jest to mapa DOMString, jeden wpis dla każdego niestandardowego atrybutu danych.

Answer 3

Aby odzwierciedlić wartości atrybutów bezpośrednio w DOM można użyć .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 

W zwykłym JavaScript może spróbować tej

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