带有JavaScript的核心字母（使用生成的内容）

Question

我有一个用Wordpress从数据库生成的锚标记，并且客户端使用的字体字距差。我需要能够在锚点链接上选择单个字母，并将margin-right CSS值添加到生成的文本中的某些字母。

我将如何选择带有Javascript的文本的第二，第三，第四字母，然后添加右边距值？我真的不知道从哪里开始？

var anchorTag = document.querySelectorAll(".taxonomy a");

Answer 1

您可以使用自定义类将每个字符包装在span元素中：

var anchorTag = document.querySelectorAll(".taxonomy a");

anchorTag.forEach(function(tag) {
  tag.innerHTML = tag.textContent
    .split('')
    .map(function(char, index) { 
       return '<span class="span_' + index + '">' + char + '</span>'; 
    })
    .join('');
});

现在您可以像这样访问各个字符

.taxonomy a .span_0 { margin-right: 1px; }
.taxonomy a .span_1 { margin-right: 4px; }
.taxonomy a .span_2 { margin-right: 2px; }

Answer 2

您可以使用for循环或foreach例如

[].forEach.call(anchorTag , function(anchor) {
  // do whatever
});

forEach(anchorTag , (index, anchor ) => {
  //do something
});