Как получить, установить и выбрать элементы с атрибутами данных?

Ответ 1

Все ответы верны, но я хочу заявить, что никто другой не сделал.
Метод jQuery data действует как средство получения атрибутов данных html5, но средство установки не изменяет атрибут data- *.
Итак, если вы добавили данные вручную (как указано в вашем комментарии), то вы можете использовать селектор атрибутов css для выбора вашего элемента:

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

но если вы добавили (изменили) данные с помощью jQuery, то вышеуказанное решение не будет работать.
Вот пример этой ошибки:

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

Поэтому обходной путь - отфильтровать коллекцию, проверив значение данных jQuery на соответствие желаемому:

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

Итак, чтобы преодолеть эти проблемы, вам нужно использовать атрибуты набора данных html5 (с помощью методов jQuery attr) в качестве методов получения и установки:

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

или вы можете использовать пользовательское выражение, которое фильтрует внутренний jQuery 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);
};

и используйте его как:

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

Обновление

Я знаю, что этой теме уже несколько лет, но, поскольку она имеет определенную активность, стоит упомянуть, что сделать это с помощью querySelector dom API (без необходимости в jQuery) довольно тривиально:

document.querySelectorAll('[attribute=value]')

Ответ 2

Чтобы сразу отразить значения атрибутов в DOM, вы можете использовать .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

В простом Javascript вы можете попробовать это

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

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

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

Ответ 3

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

Ответ 4

Вы используете селектор ID, поэтому нет необходимости использовать селектор атрибутов, так как данные являются свойством и вы его устанавливаете с помощью метода data (а не метода attr), вы не можете выбрать элемент с помощью селектора атрибутов, если хотите для выбора элемента, только если он имеет data1 === 1, вы можете использовать метод filter:

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

dataset: разрешает доступ, как в режиме чтения, так и записи, ко всем атрибутам пользовательских данных (data- *), установленным на элементе. Это карта DOMString, одна запись для каждого пользовательского атрибута данных.