我的问题：

Question

我正在尝试通过使用新的html 5“data-”属性进行存储，然后在需要时将其删除，从而找到动态加载文件和其他元素的“最佳”方法。

我的问题：

如何定位“data-”属性并将其删除，从而留下剩余的属性名称？

例如：

<!-- Custom CSS -->
<link rel="stylesheet" class="custom" data-href="css/mobile.css">

会变成这样：

<!-- Custom CSS -->
<link rel="stylesheet" class="custom" href="css/mobile.css">

编辑：整个实验适用于响应式设计（ui / performance），我需要能够根据设备分辨率加载css文件/元素。这将为较小的设备带来更高的性能，以防止不必要的数据加载。我正在使用enquire.js plugin（惊人的btw），它允许您在定位媒体查询时触发功能。因此，为了保持最新状态，我想使用“data-”属性根据设备分辨率添加/删除DOM中的元素。

Christian Heilmann的这篇教程就是这样做的： http://christianheilmann.com/2012/12/19/conditional-loading-of-resources-with-mediaqueries/

我正在尝试将他的技术与enquire.js结合起来

Answer 1

假设您知道如何使用您的元素，启用是一个单一的方法：

$(element).attr("href", $(element).data("href"));

因为data-href什么都不做，所以你不需要删除它。只需将其镜像为真实href属性即可。要使其无效，请再次使href属性无效：

$(element).attr("href", false);

或完全删除它：

$(element).removeAttr("href");

对<img>来说，这是同样的技巧，但使用字符串"src"代替"href"

Answer 2

虽然我同意值得质疑这是否是解决此问题的正确方法，但从技术角度来看，这是您访问，删除和添加元素属性的方法。

$('[data-attrName]').each(function() {
    var $el = $(this);
    var val = $el.attr('data-attrName');
    $el.removeAttr('data-attrName')
       .attr('attrName', val);
});

Answer 3

使用data-attributename替换所有attributename属性只需循环遍历数据对象即可完成。

$(element).each(function() {
    var 
        el = $(this),
        data = el.data();

        $.each(data,function(key,value) { el.attr(key,value); });
});

我会指出其他人已经指出的内容 - 我认为你已经决定这是你需要做的事情，当你可能不应该做的事情时。

尝试提出一个问题，其答案将解决您的实际问题，而不是问一个问题，其答案将解决您在使用它来尝试解决另一个问题时遇到的问题....我会理解您是否理解不明白最后一句话。

如何定位html 5属性“data-src”并用jQuery替换为“src”？

我的问题：

3 个答案: