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

我试图向文档中的所有锚添加

datawebpart

属性，但使用其包含div的数据属性填充其值

然而，我编写的代码似乎只使用一个数据属性填充所有锚（或者更确切地说，将第一个属性添加到所有锚中，然后添加第二个）

任何帮助都将不胜感激

HTML

JavaScript

//数据属性器
var webParts=document.querySelectorAll（“[datawebpart]”）；
var webPartAnchors=document.querySelectorAll（“[datawebpart]>a”）；
函数addDataAttr（）{
var closestwebpartttr；
对于（i=0；i

嵌套循环将数据属性从每个DIV复制到每个锚点，因为没有任何东西将每个锚点仅与其父锚点相关联。最后，它们都具有最后一个数据属性

由于锚点是DIV的直接子级，因此不需要使用

queryselectoral（）

来获取它们，只需在循环中使用

.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;
        }
    }
}

函数addDataAttr（）{ 对于（var i=0；i

// 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(); }
};

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;
        }
    }
}