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

Question

链接到 CodePen。我试图将所有城市文本包装在“位置”列下，并提供指向网站上特定位置页面的链接。因此，剑桥将被包装在前往剑桥页面的链接标签中，蒂明斯将被包装在前往蒂明斯页面的链接标签中，等等。我一开始只使用两个链接来尝试使其正常工作。循环访问位置列中的 td，如果该值等于特定文本，则添加指向它的链接。试图让它发挥作用。JS/////// Grab the Locations column ///////let col5 = document.querySelectorAll("td:nth-child(5)");// Cities Dataconst 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 columnfor (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 cell

let 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 编写代码，它不支持箭头函数）