使用 JavaScript 将链接标签包裹在文本周围

Question

链接到 CodePen。

我试图将所有城市文本包装在“位置”列下，并提供指向网站上特定位置页面的链接。因此，剑桥将被包装在前往剑桥页面的链接标签中，蒂明斯将被包装在前往蒂明斯页面的链接标签中，等等。

我一开始只使用两个链接来尝试使其正常工作。循环访问位置列中的 td，如果该值等于特定文本，则添加指向它的链接。试图让它发挥作用。

JS

/////// Grab the Locations column ///////

let col5 = document.querySelectorAll("td:nth-child(5)");

// Cities Data

const cities = [

  {

    id: 1,

    city: 'Cambridge',

    link: '/locations/cambridge'

  },

  {

    id: 2,

    city: 'Timmins',

    link: '/locations/timmins'

  }

]

/////// Link up all td's to location pages ///////

// Loop over locations column

for (let i = 0; i < col5.length; i++) {

  // If it matches the specific city, wrap text around link tag linking to specific location

  if (col5.innerHTML === cities[0].city) {

    // Set Links Info

    a.setAttribute("href", cities[0].link);

    // Append

    col5[i].appendChild(a);

  } else if (col5.innerHTML === cities[1].city) {

    // Set Links Info

    a.setAttribute("href", cities[1].link);

    // Append

    col5[i].appendChild(a);

  }

}

Answer 1

正如您可能想象的那样，复制/粘贴/修改每个代码的代码cities无论如何都不理想。您可以考虑使用数组方法，例如forEach和find...const cities = [  { id: 1, city: 'Cambridge', link: '/locations/cambridge' },  { id: 2, city: 'Timmins', link: '/locations/timmins' }]// Go through each celllet col5 = document.querySelectorAll("td:nth-child(5)");col5.forEach(function(el) {  // Find the city  var city = cities.find(function(x) { return x.city == el.innerHTML; });  if (city) {    // Wrap in a link    el.innerHTML = '<a href="' + city.link + '">' + el.innerHTML + '</a>';  }});<table>  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>Cambridge</td></tr>  <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>Timmins</td></tr></table>（在任何人发表评论之前请注意...我使用function(x) {}而不是x =>因为我仍然需要为 IE11 编写代码，它不支持箭头函数）