Question

好的，我有这个下拉菜单，我想在导航的主要级别加粗第一个单词。在下面的代码中查看哪些内容带有注释。

为清楚起见，我希望将我们的， Lorem 和另一个包含在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>

Answer 1

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

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

编辑：修正了它，如果<a>中只有一个单词，或者有前导空格，它仍可以正常工作。

Answer 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/

Answer 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>

Answer 4

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

用jQuery下拉大胆的第一个单词

4 个答案: