代码之家 › 专栏 › 技术社区 › Streching my competence

纯JS:在数组中存储数据属性列表,然后迭代

iteration arrays javascript

Streching my competence · 技术社区 · 6 年前

我对JS相当陌生,我可以手工操作DOM和if/else语句。现在我正在尝试一些我不喜欢的东西,把迭代和数组结合起来,我很难理解这两种方法。

记住这一点: <div id="firstAnchor"> 将充当此链接的锚: <a href="#firstAnchor"></a>

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

编辑 :

data-anchor="firstAnchor" 等等,直到我意识到我不能基于 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的直接回答(对于其他注释字段来说太长)

http://jsfiddle.net/e5u03g4p/5/

我的回答是:

data-anchor ,所以我猜括号里 querySelectorAll 告诉它我们指的是哪个特定属性,而不是我们想要的元素ID,这是“标准”书写 document.querySelectorAll("tagName") document.querySelectorAll("[attributeName]") .

对于第二个变量,您找到了ID为的第一个元素 anchorLinks . 需要hashtag将ID指定为 querySelector div 所以结果是 div#anchorLinks (?).

然后取变量 anchors (这将导致具有属性)并为每个属性触发一个函数,其中 d 函数的参数等于 数据锚定 属性。这个函数中的每一个元素都会重复属性(即 variable anchors

函数中发生的事情是:

<a> 要素

-然后设置 href <a> 元素添加到ID 的 数据锚定

-然后分配属性 title <a> 元素的内容 数据锚定 元素(而不是原来的想法) textContent < 元素(我希望链接是图像而不是文本)

-然后我又添加了一个新的 class <a> 元素以设置其样式

3 回复 | 直到 6 年前

Barmar 6 年前

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

Jake Holzinger 6 年前

如果您正确地设计查询选择器,您可以一次获得所有“锚定”元素,然后对它们进行迭代以添加相关链接。

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>

enys 6 年前

这个怎么样:

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

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