编辑：

Question

我对JS还是很陌生，我可以手工进行DOM操作和if / else语句。现在，我正在尝试将联盟与数组结合起来，这超出了我的常规，而我很难理解它们。

请牢记：考虑以下div：<div id="firstAnchor">将充当此链接的锚点：<a href="#firstAnchor"></a>

我要存储这些div的ID（id应该可以是任何数字）：

<div id="firstAnchor" style="display: inline-block;">First title</div>
<div id="secondAnchor" style="display: inline-block;">Second title</div>
<div id="thirdAnchor" style="display: inline-block;">Third title</div>

放入一个数组，然后自动创建这三个链接*，并放置在名为“ anchorLinks”的div中：

<a href="#firstAnchor">Link to first title</a>
<a href="#seconAnchor">Link to second title</a>
<a href="#thirdAnchor">Link to third title</a>

我将如何处理？

* 例如在此功能内：

(function create_anchor_link_list() {
 //placed here
})();

编辑：

这就是我尝试开始的地方。我首先在div元素上使用了data-anchor="firstAnchor"等，直到意识到无法基于data-属性值链接到div元素。因此，我尝试使用data-属性：

(function anchorsInPage2(attrib) {
    console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
    console.log("=#=#=#=#=# anchorsInPage2 function #=#=#=#=#");
    console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
    console.log("                                            ");

    var elements = document.getElementsByTagName("*");
    var foundelements = [];

    for (var i = 0; i < elements.length; i++) {
        if (elements[i].attributes.length > 0) {
            for (var x = 0; x < elements[i].attributes.length; x++) {
                if (elements[i].attributes[x].name === attrib) {
                    foundelements.push(elements[i]);
                }
            }
        }
    }
    return foundelements;

    console.log("                                              ");
    console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
    console.log("=#=#=#=#=# / anchorsInPage2 function #=#=#=#=#");
    console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
})();







function anchorsInPage3() {
    console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
    console.log("=#=#=#=#=# anchorsInPage3 function #=#=#=#=#");
    console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
    console.log("                                            ");

    var elements = document.getElementsByTagName("*");
    var foundelements = [];

    for (var i = 0; i < elements.length; i++) {
        if (elements[i].attributes.length > 0) {
            for (var x = 0; x < elements[i].attributes.length; x++) {
                if (elements[i].attributes[x].name === "anchor") {
                    foundelements.push(elements[i]);
                }
            }
        }
    }
    return foundelements;

    console.log("                                              ");
    console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
    console.log("=#=#=#=#=# / anchorsInPage3 function #=#=#=#=#");
    console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
}





(function anchorsInPage1() {
    console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
    console.log("=#=#=#=#=# anchorsInPage1 function #=#=#=#=#");
    console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
    console.log("                                            ");

    var anchors = document.querySelectorAll('[anchor]');

    for(var i in anchors){
        console.log(i);
    }

    console.log("                                              ");
    console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
    console.log("=#=#=#=#=# / anchorsInPage1 function #=#=#=#=#");
    console.log("=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#=#");
})();

进一步测试后的首次更新：

使用Barmar的示例。以下文字是对Barmar的直接回答（对于其他评论字段太长了）

测试： http://jsfiddle.net/e5u03g4p/5/

我的回复：

在第一个变量中，您发现了所有具有属性data-anchor的元素，所以我猜querySelectorAll中的括号告诉了我们我们要指的是哪个特定属性，而不是我们想要的ID是什么元素，即“标准”写成document.querySelectorAll("tagName")而不是document.querySelectorAll("[attributeName]")。

使用第二个变量，您找到了ID为anchorLinks的第一个元素。需要使用井号标签将ID指定为querySelector代表div，因此结果为div#anchorLinks（？）。

然后，您获取变量anchors（其结果是具有data-anchor属性的div的data-anchor值的数组），对于每个变量，函数将在其中触发函数的d自变量等于具有data-anchor属性的元素的元素ID。对于具有data-anchor属性（即variable anchors）的每个元素，此函数中的所有内容都会重复。

该函数内发生的事情是：

-您创建一个变量（a），其中包含创建<a>元素的元素

-然后，您将新创建的href元素的<a>属性设置为ID data-anchor元素中。

-然后我将title元素的属性<a>分配给data-anchor元素的内容（而不是原来的想法是在textContent处设置到<a>元素中，因为我希望链接是图像而不是文本）

-然后我还为class元素添加了一个新的<a>属性，以便为它们设置样式

Answer 1

如何？

document.getElementsByTagName('div').forEach(function(d) {
    var a = document.createElement('a');
    a.setAttribute('href', '#' + d.id);
    a.innerHTML = 'Link to ' + d.textContent.toLowerCase();
    document.getElementById('anchorLinks').appendChild(a);
});

或者，如果您有更多的div（当然），并且它们具有特定的类，则可以执行以下操作：

document.getElementsByClassName('your-class-name').forEach(function(d) {
    var a = document.createElement('a');
    a.setAttribute('href', '#' + d.id);
    a.innerHTML = 'Link to ' + d.textContent.toLowerCase();
    document.getElementById('anchorLinks').appendChild(a);
});

Answer 2

如果正确地构造了查询选择器，则可以一次获取所有“锚定”元素，然后对其进行迭代以添加相关链接。

var links = document.getElementById('anchorLinks');
document.querySelectorAll('#anchors div[id]').forEach(function(anchor) {
    var link = document.createElement('a');
    link.href = '#' + anchor.id;
    link.textContent = 'Link for ' + anchor.textContent;
    links.appendChild(link);
});

<div id="anchors">
  <div id="firstAnchor" style="display: inline-block;">First title</div>
  <div id="secondAnchor" style="display: inline-block;">Second title</div>
  <div id="thirdAnchor" style="display: inline-block;">Third title</div>
</div>
<div id="anchorLinks">
</div>

Answer 3

如果您在DIV中使用了data-anchor="something"，则应该使用

var anchors = document.querySelectorAll('[data-anchor]');

不是[anchor]。

然后您可以使用forEach()

遍历它们

var anchorLinks = document.querySelector("#anchorLinks");
anchors.forEach(function(d) {
    var a = document.createElement('a');
    a.href = '#' + d.id;
    a.textContent = 'Link to ' + d.textContent.toLowerCase();
    anchorLinks.appendChild(a);
});

纯JS：将数据属性列表存储在数组中，然后进行迭代

编辑：

进一步测试后的首次更新：

3 个答案: