jquery – 如何获取,设置和选择具有数据属性的元素?

前端之家收集整理的这篇文章主要介绍了jquery – 如何获取,设置和选择具有数据属性的元素?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在数据属性方面遇到麻烦,因为某些原因我无法做任何事情,所以我一定要做错事:

组:

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

这有什么区别吗

得到:

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

选择:

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

这些都不适用于我,我做这个还是怎么做的?

解决方法

所有答案都是正确的,但我想说明没有人做过的事情。
jQuery数据方法像html5数据属性的getter一样,但是setter不会改变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 methos)作为getter和setter:

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

或者您可以使用过滤jQuery内部数据的自定义表达式:

$.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)')
原文链接:https://www.f2er.com/jquery/183369.html

猜你在找的jQuery相关文章