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

时间：2017-06-27 20:01:19

标签： javascript html

我正在尝试将data-webpart属性添加到文档中的所有锚点，但是使用其包含div的数据属性填充它们的值。

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

非常感谢任何帮助！

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

1 个答案:

答案 0 :(得分：0)

您的嵌套循环正在将数据属性从每个 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;
        }
    }
}