在文本冒号“:”之前,在<li> </li>之间将不同的样式包装到特定文本中?

时间:2014-10-21 06:48:22

标签: jquery css

在我试图解释我的意思之前,我会失去自己的意思,这是我想要实现的一个例子。

现在如何:

<ul>
    <li>My name: Sietse</li>
    <li>Country: The Netherlands</li>
</ul>

我希望如何:

<ul>
    <li><strong>My name:</strong> Sietse</li>
    <li><strong>Country:</strong> The Netherlands</li>
</ul>

我的网站上有很多现有内容被标记为第一个示例,但是有一种方法可以动态选择和设置文本样式,直到(可能包括)LI中的冒号,如第二个例子?

请注意,我是jQuery或任何Javascript的绝对初学者。

2 个答案:

答案 0 :(得分:4)

您可以使用.html()和字符串replace(),例如

&#13;
&#13;
$('ul li').html(function (i, html) {
    return html.replace(/(.*?:)/, '<strong>$1</strong>')
})
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
    <li>My name: Sietse</li>
    <li>Country: The Netherlands</li>
</ul>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

尝试以下

$(function() {
  $("ul li").each(function() {
   if ($(this).text().indexOf(':') > -1) {
       $(this).html('<strong>' + $(this).html().split(':').join(':</strong>')); 
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul>
  <li>My name: Sietse</li>
  <li>Country: The Netherlands</li>
</ul>