0

我试图瞄准下一个'。在使用 jquery 的标题中。

所以现在的标题是

<h1 class="page-head">Explore. Think. Connect.</h1>

我的jQuery是

 $(h1.page-head:contains(.)').each(function(){
  $(this).html(
    $(this).html().replace('.','<span class=\'nice-point\'>&#46;</span>')
  );
});

我想知道如何针对其他 2 '。分别为它们添加样式。

任何帮助将不胜感激！

4

2 回答 2

2

像这样，使用接受函数的重载：.html()

$('h1.page-head:contains(.)').html(function (index, oldHtml) {
    return oldHtml.replace(/\./g, '<span class="nice-point">&#46;</span>');
});

如果你想对 中的每一个做一些不同的事情.，oldHtml你可以变得更漂亮，因为replace()它也接受一个函数，或者你可以使用任何其他所需的字符串操作：

$('h1.page-head:contains(.)').html(function (index, oldHtml) {
    // equivalent to the code above; just an example
    return oldHtml.split('.').join('<span class="nice-point">&#46;</span>');
});
于 2013-05-27T04:53:51.483 回答
0

如果您想对出现的每个事件应用特定样式，您可以按照文本中出现的点的顺序排列您希望应用的样式。

像。

$("h1.page-head:contains(.)").each(function(){

  newHTML = $(this).html()
  .replace('.','<span style=\'color:#F00;\'>&#46;</span>')
  .replace('.','<span style=\'color:#40F;\'>&#46;</span>')
  .replace('.','<span style=\'color:#0F4;\'>&#46;</span>')    

  $(this).html(newHTML);


});

这是一个演示小提琴

上述示例分别适用style=\'color:#F00;\'于第一个点、 style=\'color:#40F;\'第二个点 style=\'color:#0F4;\'和第三个点。我认为这就是您为每个点单独添加样式的意思。对不起，如果我错了。

于 2013-05-27T05:04:33.847 回答