Question

<ul>
<li>Name: Billy</li>
<li>Phone: 0000000000</li>
<li>Email: info@email.com</li>
</ul>

我正在尝试将所有值（在分号:之后）加粗，例如Billy等。我如何使用jQuery实现这一目标？

应该如下所示：

姓名：比利
电话： 0000000000
电子邮件： info@email.com

Answer 1

尝试这样的事情：

$('li').each(function(){
 var c = $(this).text().split(":");
 $(this).html( c[0] + ':<b>' + c[1] + '</b>');
});

Answer 2

这应该有效

$('li').each(function(){
    var contents = $(this).text().split(":");
    contents[1] = "<b>" + contents[1] + "</b>";
    $(this).html(contents[0] + ": " + contents[1]);
});

它将当前文本拆分为“：”，然后将标记添加到后半部分。

小提琴：http://jsfiddle.net/u6vHD/

Answer 3

这将起作用

$(function () {
    $('li').each(function(){
        $(this).html($(this).html().replace(/:\s*(.+)$/gi, ": <b>$1</b>"));
    })
});

Answer 4

<ul>
    <li>Name: <span>Billy</span></li>
    <li>Phone: <span>0000000000</span></li>
    <li>Email: <span>info@email.com</span></li>
</ul>

并使用以下代码

$('li > span').each(function(){
 $(this).contents().wrapAll("<b/>");
});

Demo

Answer 5

$('li').each(function(){
   var text = "<b>"+ $(this).text().split(':')[1]+"</b>";
   $(this).html($(this).text().split(':')[0] +": "+ text);
});

jsFiddle Demo

Answer 6

您可以添加一个额外的元素，并使用CSS完成所有操作：

<强> CSS

ul li span{
font-weight:bold;
}

<强> HTML

<ul>
<li>Name: <span>Billy</span></li>
<li>Phone: <span>0000000000</span></li>
<li>Email: <span>info@email.com</span></li>
</ul>

我看到这种情况发生的唯一方法是将您想要突出显示的文本包装在包装器中（span，div等）。我还没有看到一种在没有包装元素的情况下有选择地将文本换成粗体的方法。您可以修改给定文本的样式（如果已包装），使用jquery ...

$("ul#somename li span").style("font-weight", "bold");

或

$("ul#somename li span").addClass('someBoldClass');

Answer 7

<ul>
 <li>Name: Billy</li>
 <li>Phone: 0000000000</li>
 <li>Email: info@email.com</li>
</ul>


$('ul li').each(function(i){
  var litext = $(this).text(); 
  var arrayli = litext.split(' ');
  var bold = "<b>" + arrayli[1] + "</b>";
  $(this).text(arrayli[0] + ' ' + bold);
});

在标识符后生成一串粗体文本

7 个答案: