我如何显示所有<a> links inside a span beisde the </a> <a>

Question

I have the following markup, which represents a table which have <a> inside its <td>:-

的href

现在我正在尝试使用javascript找到一种方法来显示旁边所有<a class="ms-listlink">的href。所以<td＆gt;将包含以下内容： -

Design Transfer
http://***/buisnessfunctions/pmo/progammes/136/

而不只是显示文字： -

Design Transfer

有没有办法实现这个目标？

Answer 1

您可以在没有javascript的情况下执行此操作 - css具有可以访问属性的content属性。这是一个例子：

＆＃13;

＆＃13;

a {
  display: block;
}

a:after {
  display: inline-block;
  margin-left: 1em;
  content: attr(href);
}

＆＃13;

<a href="http://google.com">Google</a>
<a href="http://zombo.com">Zombocom</a>

＆＃13;

＆＃13;

＆＃13;

Answer 2

遍历每个链接，读取其href属性并插入链接后。

$('.ms-listlink').each(function(){
   var link = $(this).attr('href');
   $(this).insertAfter('<span>'+ link +'</span>');
});

Answer 3

我更喜欢上面的CSS解决方案，但这里是JS解决方案FWIW

$('.ms-listlink').each(function() {
  const href = $(this).attr('href');
  const $td = $(this).closest('td');
  $($td).append(href);
})

Answer 4

我非常喜欢CSS答案。小巧，简单，简洁。万一你好奇（或者出于某种原因需要一个只有JS的解决方案），这里有一种方法可以用普通的JavaScript（没有额外的库）来做到这一点：

<div id=container>
  <a href=https://google.com    >GOOGLE   </a> <span></span> <br />
  <a href=https://faceboook.com >FACEBOOK </a> <span></span> <br />
  <a href=https://yahoo.com     >YAHOO    </a> <span></span> <br />
</div>

<script>
var container = document.getElementById('container');

var anchor = container.getElementsByTagName('a');
var span   = container.getElementsByTagName('span');

for(var item in anchor) {
    span[item].innerHTML = anchor[item].href;
}

</script>

*注意：如果您需要将网址作为超链接的可点击部分，请将span的放在中的“a”标记。