javascript - 使用 javascript 将一个数字关联到每个链接 html

Question

我想使用 js 为从 DOM 中选择的每个链接添加一个数字。
为此，我使用 map 方法制作了一个函数，以便将所有链接与一个键相关联

function mapLinks(){
    var links = document.querySelectorAll('a')
    var listLinks = new Array(links.length); 
    for(i = 0; i <links.length; i++){
        listLinks[i] = i; 
    }
    var mapLink = new Map([[listLinks, links]]) 
    return (mapLink)
}
var map = mapLinks(); 

现在，我想做的是在网页上显示数字（或键），如下所示：

我试过这段代码，但它不是最好的解决方案，因为在某些情况下它会扭曲网页的结构

function linksNumber(){ 
    for(var [key, value] of map){
        for(var i = 0, j = 0; i < key.length, j < value.length; i++, j++){
            value[j].textContent = value[j].textContent + key[i]
        }
    }
}

标签： javascripthtml

Answer 1

您可以使用 css::before或::after选择器content: attr(data-n)来保持页面结构基本相同。

function mapLinks(){
    var links = document.querySelectorAll('a')
    var listLinks = new Array(links.length); 
    for(i = 0; i <links.length; i++){
        links[i].setAttribute('data-n', i)
    }
    var mapLink = new Map([[listLinks, links]]) 
    return (mapLink)
}

mapLinks()

a::after {
  content: attr(data-n);
  width: 10px;
  height: 10px;
  background: yellow;
  display: inline;
  font-size: 10px;
  position: relative;
  top: -6px;
}

<a href="test">Test</a>
<a href="hi">Hi</a>

如果不能添加css文件，可以使用JS添加内联<style>元素：

var sheet = document.createElement('style');
sheet.innerHTML = `
  a::after {
    content: attr(data-n);
    width: 10px;
    height: 10px;
    background: yellow;
    display: inline;
    font-size: 10px;
    position: relative;
    top: -6px;
  }
`
(document.head || document.getElementsByTagName('head')[0]).appendChild(sheet);

或者，除了创建样式表之外没有 javascript：

var sheet = document.createElement('style');
sheet.innerHTML = `
      body { counter-reset: number -1; }
      a::after {
        content: counter(number);
        counter-increment: number;
        width: 10px;
        height: 10px;
        background: yellow;
        display: inline;
        font-size: 10px;
        position: relative;
        top: -6px;
      }
    `;
(document.head || document.getElementsByTagName('head')[0]).appendChild(sheet);

<a href="hello">Hello</a>
<a href="world">World</a>