javascript - 使用 ID 为段落内的字符串设置样式

Question

我有这个 HTML:

<p>
   (rcvd)                           
<a href="linkhere">Title</a>
   by Person,                          
<br></br>
   - More text            
</p>

我想将 (rcvd) 的颜色更改为绿色。我尝试了以下方法:

1. 这会将整行更改为绿色，但保留链接

   $("p:contains('(rcvd)')").attr("样式","颜色:绿色");

2. 这会将 rcvd 部分更改为绿色，但会删除标题链接

   $("p").each(function() {
       var text = $(this).text();
       text = text.replace("(rcvd)", "<span style='color:green;'>(rcvd)</span>");
       $(this).html(text);
   });
   

3. 这没有任何作用，但我认为这是我想要的解决方案，在我缺少的地方进行一些小调整

   $(p).html($(p).html().replace("(rcvd)","<span style='color:green;'>(rcvd)</span>"));
   

欢迎任何指点(我对 JQuery 还很陌生，正在努力学习，所以我希望能解释一下您为什么提出建议。

Answer 1

我自己的建议是:

$('p').html(function(i,h){
    return h.replace('(rcvd)', '<span class="greenColoured">(rcvd)</span>');
});

使用 CSS 提供样式:

.greenColoured {
    color: green;
}

JS Fiddle demo .

正如 TrueBlueAussie 所指出的(在下面的评论中)，我没有解释传递给 html() 方法的匿名函数中的参数:function(i, h):

html() 方法本质上是对选择器返回的集合进行迭代(在本例中是对所有选定的段落进行迭代)；如果不使用匿名函数，每个 p 元素将具有相同的 HTML 集。使用该函数，通过 i 和 v(可以随意命名)允许您访问当前的索引 (i)集合中的迭代元素，v(第二个参数)返回当前“值”(在本例中为正在迭代的当前节点的现有 innerHTML) .

如上所述，这些参数可以随意命名，对我来说，i 和 h 是习惯性的(i 代表“index”，在本例中，h 代表 HTML)；只要您记住(与传递给 jQuery 方法的许多其他匿名函数一样)，第一个是索引，第二个是“当前值”。

引用文献:

• html() .
• String.replace() .