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

回答

相關問題