Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by damien marez
damien marez
6,085 Points

toUpperCase() Jquery method help

Hi everyone,

I have to capitalize the letters of my menu links with JQuery but I can't find how to do that. Is someone can help me please ?

This is my HTML

<ul class="list-inline pull-xs-right">
     <li class="list-inline-item list-unstyled"><a class="nav-link testLI" href="index.html">menu1</a></li>
     <li class="list-inline-item"><a class="nav-link testLI" href="research.html">menu2</a></li>
     <li class="list-inline-item"><a class="nav-link testLI" href="developer.html">menu3</a></li>
     <li class="list-inline-item"><a class="nav-link testLI" href="partnership.html">menu4</a></li>
     <li class="list-inline-item"><a class="nav-link testLI" href="video.html">menu5</a></li>
</ul>

I retrieve the content of each <a> in the <li> but I don't know how to replace my links (menu1, menu2, menu3...) by (MENU1, MENU2, MENU3 ...) For example, I have tried that in JQuery : 

$( "a.testLI" ).each( function(){
console.log(($( this ).text().toUpperCase()));
});

Thanks ^_^

2 Answers

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

:point_right: Instead of logging the uppercase, just replace the original with it:

$("a.testLI").each(function() {
  $(this).text($(this).text().toUpperCase());
});

But — why not just use upper case in your HTML?

damien marez
damien marez
6,085 Points

Thanks Steven ! Of course, it's easier to use upper case in my HTML but I wanted to try in javascript ^_^ (I'm learning JS)

Have a nice day ^_^

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

Oh, just an experiment then. I suppose that also explains the complicated resolution — you were trying out IIFE's and intermediate variables as well. :smile:

Happy coding! -sp:sparkles:

damien marez
damien marez
6,085 Points
damien marez
damien marez
6,085 Points

Sorry, I found the answer... I hope this will help someone.

HTML part

<ul class="list-inline pull-xs-right">
     <li class="list-inline-item list-unstyled"><a class="nav-link testLI" href="index.html">menu1</a></li>
     <li class="list-inline-item"><a class="nav-link testLI" href="research.html">menu2</a></li>
     <li class="list-inline-item"><a class="nav-link testLI" href="developer.html">menu3</a></li>
     <li class="list-inline-item"><a class="nav-link testLI" href="partnership.html">menu4</a></li>
     <li class="list-inline-item"><a class="nav-link testLI" href="video.html">menu5</a></li>
</ul>

javascript part

// The function is : IIFE (immediately invoked function expression)
(function(){
$("a.testLI").each(function){
 var liContent = $(this).text();
 var capitalizeLiContent = liContent.toUpperCase();
 $(this).html(capitalizeLiContent);
});
}());
Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

That's rather complicated, you only needed the minor change I showed above. :arrow_heading_up:

But I still don't understand why you don't just make the text uppercase in the HTML!