Bold First Word In Dropdown with jQuery

Question

Ok so I have this drop down and I want to bold the first word in the main level of the nav..See which ones in my code below with comments.

To make it clear I would like the words Our, Lorem, and Another to be wrapped in a strong tag or a span tag since they are the first words in the main level of the navigation. How can I accomplish this with 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>

See this: http://stackoverflow.com/questions/55612/css-to-increase-size-of-first-word — Angelo R., May 17 '11 at 20:29
`` doesn't work in `` apparently, but please take a look at http://jsfiddle.net/ckWks/1/. — pimvdb, May 17 '11 at 20:34
hmm. strange. is there a way that I can say the first word of the nav li to have font-weight:bold? — breezy, May 17 '11 at 20:41

user113716 · Accepted Answer · 2011-05-17T20:51:43.207

4

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

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

EDIT: Fixed it so it will still work if there's only one word in the <a>, or if there are leading spaces.

edited May 17 '11 at 20:51

answered May 17 '11 at 20:45

user113716

318,772
63
451
440

I like this because its short and minimal however homepage doesn't get wrapped in a span tag. – breezy May 17 '11 at 20:53
@SirB: I'm not sure what you mean. Do you mean "Our Home"? Only "Our" Should be wrapped, right? – user113716 May 17 '11 at 20:56
1

@SirB: You're welcome. Must have been one of the whitespace issues. :o) – user113716 May 17 '11 at 20:57

Mutt · Answer 2 · 2011-05-17T20:47:02.817

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);
      });
    });

Then use CSS style:

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

Fiddle: http://jsfiddle.net/zbfcS/

edited May 17 '11 at 20:47

answered May 17 '11 at 20:38

Mutt

937
6
9

score 1 · Answer 3 · edited May 23 '17 at 09:59

1

Here is a good method, based on @jensgram's answer at 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>

edited May 23 '17 at 09:59

Community

1
1

answered May 17 '11 at 20:37

George Cummins

28,485
8
71
90

score 0 · Answer 4 · answered May 17 '11 at 20:34

0

Are you dynamically loading the nav or will it change frequently? If not, you probably do not need any extra scripting added to your page re changing the first word with js. Just add the strong tags to the appropriate word.

answered May 17 '11 at 20:34

Jason Gennaro

34,535
8
65
86

Yes the nav is dynamically being generated. – breezy May 17 '11 at 20:37

Bold First Word In Dropdown with jQuery

4 Answers4