jQuery下拉列表中的第一个粗体字答案

【问题标题】：Bold First Word In Dropdown with jQueryjQuery下拉列表中的第一个粗体字
【发布时间】：2011-05-18 04:51:43
【问题描述】：

好的，所以我有这个下拉菜单，我想在导航的主要级别中将第一个单词加粗。在下面的代码中使用 cmets 查看哪些单词。

为了清楚起见，我希望将词 Our、Lorem 和 Another 包裹在 strong 标记或span 标签，因为它们是导航主级别中的第一个单词。我怎样才能用 jQuery 完成这个？

<ul class="clearfix" id="topnav">
  <li class="mainNavFirst"><a href="/">Our Home</a></li> <!-- bold this 'our' -->
  <li class="mainNavMiddle"><a href="#">Lorem Ipsum</a><!-- bold this 'Lorem' -->
    <div>
      <ul>
        <li class="sectionTitle">
          <h2><a href="#">Ipsum Lorem</a></h2>
        </li>
        <li><a href="#">Just a random link</a></li>
        <li><a href="#">Just a random link</a></li>
      </ul>
      <ul>
        <li class="sectionTitle">
          <h2><a href="#">Ipsum Lorem</a></h2>
        </li>
      </ul>
    </div>
  </li>
  <li class="mainNavLast"><a href="#">Another Link</a></li><!-- bold this 'Another' -->
</ul>

【问题讨论】：

看这个：stackoverflow.com/questions/55612/…
<strong> 显然在<a> 中不起作用，但请查看jsfiddle.net/ckWks/1。
嗯。奇怪的。有没有一种方法可以让我说出 nav li 的第一个单词来拥有 font-weight:bold？

标签： jquery html

【解决方案1】：

$('#topnav > li > a').html(function(i,html){
    return html.replace(/^\s*([^\s]+)(\s|$)/, '<span>$1 </span>');
});

http://jsfiddle.net/LKXKs/3/

编辑：已修复它，因此如果<a> 中只有一个单词，或者有前导空格，它仍然可以工作。

【讨论】：

我喜欢这个，因为它简短而最小，但是主页不会被包含在 span 标签中。
@SirB：我不确定你的意思。你是说“我们的家”吗？只有“我们的”应该被包裹，对吧？
@SirB：不客气。一定是空白问题之一。 :o)

【解决方案2】：

    $(function(){
      $('#topnav > li > a').each(function(item, index){
            var firstWord = $(this).text().split(" ")[0];
            var newText = $(this).text().replace(firstWord, "<span>"+firstWord +"</span>");
            $(this).html(newText);
      });
    });

然后使用 CSS 样式：

#topnav > li > a span { font-weight: 800; }

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

【讨论】：

【解决方案3】：

这是一个很好的方法，基于@jensgram 在First Word in String with jquery 的回答：

<script>
    boldFirstWord($(".clearfix .mainNavFirst > a"));
    boldFirstWord($(".clearfix .mainNavMiddle > a"));
    boldFirstWord($(".clearfix .mainNavLast > a"));

    function boldFirstWord(element) {
        element.html( element.html().replace(/^(\w+)/, '<strong>$1</strong>'));
    }
</script>

【讨论】：

【解决方案4】：

您是动态加载nav 还是会经常更改？如果没有，您可能不需要在页面中添加任何额外的脚本来使用js 更改第一个单词。只需将strong 标签添加到相应的单词中即可。

【讨论】：

是的，导航是动态生成的。