0

我有这个 HTML：

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

我想将（rcvd）的颜色更改为绿色。我尝试了以下方法：

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

    $("p:contains('(rcvd)')").attr("style","color:green");

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

    $("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 的新手并正在努力学习，所以我很想解释一下你为什么提出你提出的建议。

4

4 回答 4

4

我自己的建议是：

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

使用 CSS 提供样式：

.greenColoured {
    color: green;
}

JS 小提琴演示。

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

该html()方法本质上遍历选择器返回的集合（在这种情况下遍历所有选定的段落）；如果不使用匿名函数，每个p元素都将具有相同的 HTML 集。使用该函数，iand v（可以随意命名，允许您访问i集合中当前迭代元素的索引（），并且v（第二个参数）返回当前的“值”（在这种情况下innerHTML被迭代的当前节点的存在）。

如前所述，这些参数可以被称为任何你喜欢的，对我来说i并且h是习惯性的（i对于'index'，h在HTML这种情况下）；只要您记得（与传递给 jQuery 方法的许多其他匿名函数一样）第一个是索引，第二个是“当前值”。

参考：

于 2013-09-24T13:29:57.227 回答
3

这将选择 P 中的第一个节点（恰好是一个文本节点）并设置它的样式：

$("p").contents().first().wrap("<span style='color:green'></span>");

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

更新。好的，这是使用类：

.rStyle {
   color:green;     
}

$("p").contents().first().wrap("<span/>").parent().addClass("rStyle");
于 2013-09-24T13:32:01.447 回答
0

使用css()并给你的<p>标签一个类：

<p id="myGreenClass">(rcvd)</p>

这个jQuery代码：

$('.myGreenClass').css('color', 'green');
于 2013-09-24T13:30:39.120 回答
0

尝试将标签名称用引号引起来（jsFiddle）：

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

目前，您正在将变量传递p给 jQuery 函数。Presumablep是未定义的，所以你要么得到一个 Javascript 错误，要么只是一个空的 jQuery 对象。

正如其他人所说，执行此操作的标准方法是将 rvcd 包装在一个跨度中：

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

和

$(".style-this").css("color", "green");
于 2013-09-24T13:26:44.517 回答