更改链接第二个字母的颜色

Question

我是 jquery 的新手。我一直在尝试找出如何定位链接的第二个字符并将其颜色更改为红色。

$(document).ready(function () { $(".header-title-text").find("a:nth-child(2)").css({color: 'red'}); });

HTML：

<div class='header-title-text'> 
   <a>title</a> 
</div> 

我正在尝试瞄准第二个字母。

没有 nth-child(2)，我的代码成功地将整个链接的颜色更改为红色。

我做错了什么？

Answer 1

你不能直接给字母添加颜色，你需要把它放在像span这样的HTML元素中，然后你才能添加颜色。

工作片段：

$(document).ready(function() {
  var secLetter = $(".header-title-text").find("a").text().split('')[1];
  $(".header-title-text").find("a").html($(".header-title-text").find("a").html().replace(secLetter, "<span class='red'>" + secLetter + "</span>"));
});

.red {
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header-title-text">
  <a href="abc.com">title</a>
</div>