Question

我使用下面找到的脚本生成目录。

它目前将一个目录附加到ID。我想使用getElementsByClassName在同一页面上两次添加目录。

我知道我需要循环遍历元素数组，但我无法正确理解语法。

非常感谢任何帮助。

// External code for generating a simple dynamic Table of Contents
function generateTableOfContents(els) {
    var anchoredElText,
        anchoredElHref,
            ul = document.createElement('UL');

  document.getElementById('table-of-contents').appendChild(ul);

    for (var i = 0; i < els.length; i++) {
    anchoredElText = els[i].textContent;
        anchoredElHref = els[i].querySelector('.anchorjs-link').getAttribute('href');
    addNavItem(ul, anchoredElHref, anchoredElText);
  }
}

function addNavItem(ul, href, text) {
  var listItem = document.createElement('LI'),
          anchorItem = document.createElement('A'),
      textNode = document.createTextNode(text);

  anchorItem.href = href;
  ul.appendChild(listItem);
  listItem.appendChild(anchorItem);
  anchorItem.appendChild(textNode);
}

Example of getElementById

Answer 1

你将遇到一个问题。单个元素只能附加到文档一次。如果您尝试将其附加到其他位置，它将首先从当前位置移除。

避免这种情况的一种可能解决方案是使用cloneNode。

使用ES5 forEach，您的函数的可能版本将是：

function generateTableOfContents(els) {
    var anchoredElText, anchoredElHref,
        ul = document.createElement('UL');

    for (var i = 0; i < els.length; i++) {
        anchoredElText = els[i].textContent;
        anchoredElHref = els[i].querySelector('.anchorjs-link').getAttribute('href');
        addNavItem(ul, anchoredElHref, anchoredElText);
    }

    // We have to use call here, because getElementsByClassName returns an array-like, not an actual array
    [].forEach.call(document.getElementsByClassName('table-of-contents'), function(el) {
        el.appendChild(ul.cloneNode(true));
    });

    // Alternative to the 3 above lines using a for
    // var tocs = document.getElementsByClassName('table-of-contents');
    // for (var i = 0; i < tocs.length; i++) {
    //  tocs[i].appendChild(ul.cloneNode(true));
    // }
}

使用getElementsByClassName而不是getElementById将脚本修改为appendChild

1 个答案: