如何获得，设定和选择具有数据属性的元素？(How to get, set and select el

我遇到一些麻烦数据的属性，我不能得到任何出于某种原因，所以我一定是错了做一些工作：

组：

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

这有什么区别吗？

得到：

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

选择：

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

这一切都不为我工作，我在这做起来还是怎么回事？

Answer 1:

所有的答案是正确的，但我想说明的东西，别人没有。
jQuery的data的方法的作用就像用于HTML5数据属性的吸气剂，但装定不改变数据- *属性。
所以，如果您手动添加的数据（如您的评论陈述），那么你可以使用一个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 methos）的getter和setter方法：

$('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)')

Answer 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

Answer 3:

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

Answer 4:

您正在使用的ID选择，所以没有必要使用属性选择，因为数据是一个属性，您使用的设置它data的方法（ 不ATTR法 ）使用属性选择，你不能选择的元素，如果你想只选择元素如果有data1 === 1您可以使用filter的方法：

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