Question

我正在尝试更改链接的名称，但是，我有一些限制。该链接放在如下所示的代码中：

<li class='time'> 
<a href="#time">Review Time</a> 
<img alt="Styled" src="blah" /> 
</li>

基本上，我有一个可以使用的班级名称。我不允许在这些行中编辑任何内容，我只有一个页眉/页脚来编写Javascript / CSS。我正在尝试将 Review Time 显示为<例如，em>时间评论 。

我知道我可以通过在CSS中使用.time {display：hide}隐藏它，但我无法找到替换文本的方法。文本也是一个链接，如图所示。我在JS中尝试了各种替换函数，但是我做错了，或者它不起作用。

任何帮助都将不胜感激。

Answer 1

您可以获取具有您要查找的类名的li的子元素，然后更改您找到的锚标记的innerHTML。

例如：

    var elements = document.getElementsByClassName("time")[0].getElementsByTagName("a");

    for(var i = 0, j = elements.length; i<j; i++){
        elements[i].innerHTML = "Time Review";
    }

当然，这假设页面上有一个名为“time”的元素。您还需要注意检查空值。

Answer 2

拆分空格上的单词，颠倒顺序，重新组合。

var j = $('li.time > a');
var t = j.text();
var a = t.split(' ');
var r = a.reverse();
j.text(r.join(' '));

在多语言情况下，这可能会产生一些令人讨厌的后果。

Answer 3

老派JavaScript：

function replaceLinkText(className, newContents) {
  var items = document.getElementsByTagName('LI');
  for (var i=0; i<items.length; i++) {
    if (items[i].className == className) {
      var a = items[i].getElementsByTagName('A'); 
      if (a[0]) a[0].innerHTML = newContents;
    }
  }
}

replaceLinkText("time", "Review Time");

请注意，现代浏览器支持getElementsByClassName()，这可以简化一些事情。

Answer 4

您可以遍历DOM并使用以下JavaScript修改Text：

var li = document.getElementsByClassName('time');
for (var i = 0; i < li.length; i++) {
   li[i].getElementsByTagName('a')[0].innerText = 'new text';
}

演示：http://jsfiddle.net/KFA58/

Javascript - 链接名称随着限制而变化

4 个答案: