HTML

<body> 
    <div data-webpart="form"> 
     <a href="#">Test Link</a> 
     <a href="#">Test Link</a> 
     <a href="#">Test Link</a> 
    </div> 
    <div data-webpart="icon-grid"> 
     <a href="#">Test Link</a> 
     <a href="#">Test Link</a> 
     <a href="#">Test Link</a> 
    </div> 
</body>

的JavaScript

// data attributer 
var webParts = document.querySelectorAll("[data-webpart]"); 
var webPartAnchors = document.querySelectorAll("[data-webpart] > a"); 

function addDataAttr() { 
    var closestWebPartAttr; 
    for (i = 0; i < webPartAnchors.length; i++) { 
     for (e = 0; e < webParts.length; e++) { 
      closestWebPartAttr = webParts[e].getAttribute("data-webpart"); 
      webPartAnchors[i].setAttribute("data-web-part", closestWebPartAttr); 
     } 
    } 
} 

window.onload = function() { 
    if (webParts !== null) { addDataAttr(); } 
};

来源

2017-06-27 Jeremy Fleischer

你的嵌套的循环是从复制数据属性每一个 DIV到每锚，因为没有什么是涉及每个锚，只是他们的父母。最后他们都有最后一个数据属性。

由于锚点是DIV的直接子对象，因此不需要使用querySelectorAll()来获取它们，您可以在循环内使用.children()。

function addDataAttr() { 
    for (var i = 0; i < webParts.length; i++) { 
     var webpart = webParts[i].dataset.webpart; 
     var children = webParts[i].children; 
     for (var j = 0; j < children.length; j++) { 
      children[j].dataset.webpart = webpart; 
     } 
    } 
}

来源

2017-06-27 20:10:56 Barmar

向锚点添加不同的数据属性

HTML

的JavaScript

回答

相关问题