jQuery toLowerCase and then apply Capitalize CSS Style

Question

I have some html link values I need to convert from UPPERCASE back to LOWERCASE and then style with capitalization... The root of the problem is the fact it comes it already arrives as uppercase but I can't help that so this is my workaround:

The HTML:

<div class="block1">
  <p><a href="#">SECTION TITLE</a></p>
  <ul>
    <li><a href="#">LINK TITLE</a></li>
    <li><a href="#">LINK TITLE</a></li>
    <li><a href="#">LINK TITLE</a></li>
    <li><a href="#">LINK TITLE</a></li>
    <li><a href="#">LINK TITLE</a></li>
    <li><a href="#">LINK TITLE</a></li>
    <li><a href="#">LINK TITLE</a></li>
  </ul>
</div>

The jQuery:

jQuery('.block1 ul li a').each(function() {
  var linkText = jQuery(this).html();
  linkText.toLowerCase();
  jQuery(this).css("text-transform", "capitalize");
});

At the moment, I am not seeing a conversion back to lowercase via linkText.toLowerCase(); I do see the text-transform code being added to each link but that's it.

Fiddle

Possible duplicate of [First lowercase the text then capitalize it. Is it possible with CSS?](http://stackoverflow.com/questions/5280015/first-lowercase-the-text-then-capitalize-it-is-it-possible-with-css) — skobaljic, Sep 14 '16 at 10:42
@sko Yes I had visited this question but I didn't understand the outcome. — Jake, Sep 14 '16 at 10:50

score 2 · Answer 1 · answered Sep 14 '16 at 10:38

2

If I have understood your problem (toLowerCase not working) correctly then,

Update from

linkText.toLowerCase();

to

jQuery(this).html(linkText.toLowerCase());

answered Sep 14 '16 at 10:38

Nikhil Aggarwal

28,197
4
43
59

1

Excellent @nikhil, thank you! I am new to JS & jQuery so this new line confuses me. Why do I need to use `.html()` again if I have already set this on line 2? – Jake Sep 14 '16 at 10:42
Because you need to transform the string into lowercase and then replace it back in the DOM element – Ish Sep 14 '16 at 10:44
@Jake - As Ish has pointed out, the first one is getter and to set value, you need to pass the value. For details, refer to documentation over here - http://api.jquery.com/html/ – Nikhil Aggarwal Sep 14 '16 at 10:46

score 2 · Answer 2 · answered Sep 14 '16 at 10:41

For this to work you need to first make the text of the elements lower case before applying the CSS rule to them.

Also note that you should apply the rule using a class instead of an inline attribute for better separation of concerns and there's also no need for an each() loop. Try this:

$('.block1 ul li a').text(function(i, t) {
   return t.toLowerCase();
}).addClass('capitalize');

.capitalize {
  text-transform: capitalize;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block1">
  <p><a href="#">SECTION TITLE</a></p>
  <ul>
    <li><a href="#">LINK TITLE</a></li>
    <li><a href="#">LINK TITLE</a></li>
    <li><a href="#">LINK TITLE</a></li>
    <li><a href="#">LINK TITLE</a></li>
    <li><a href="#">LINK TITLE</a></li>
    <li><a href="#">LINK TITLE</a></li>
    <li><a href="#">LINK TITLE</a></li>
  </ul>
</div>

score 2 · Accepted Answer · answered Sep 14 '16 at 10:42

You change the variable, linkText, but you don't assign the lower-cased string to the <a> element. Instead, try:

jQuery('.block1 ul li a').each(function() {
  var linkText = jQuery(this).html();
  jQuery(this).text( linkText.toLowerCase() );
  jQuery(this).css("text-transform", "capitalize");
});

Or, much more simply:

jQuery('.block1 ul li a').text(function(index, currentText) {
    return currentText.toLowerCase();
}).css('text-transform', 'capitalize');

Or, more sensibly, simply use a CSS class to target all the relevant elements and add that class to those elements:

jQuery('.block1 ul li a').text(function(index, currentText) {
    return currentText.toLowerCase();
}).addClass('capitalize');

Along with the CSS class:

.capitalize {
    text-transform: capitalize;
}

Thank you for showing me how to condense this down.Very helpful. — Jake, Sep 14 '16 at 10:51

score 0 · Answer 4 · answered Sep 14 '16 at 10:43

check this : https://jsfiddle.net/2kfhm535/

jQuery('.block1 ul li a').each(function() {
  var linkText = jQuery(this).html();

  linkText1 = linkText.toLowerCase();
  jQuery(this).html(linkText1);

  jQuery(this).css("text-transform", "capitalize");
});

jQuery toLowerCase and then apply Capitalize CSS Style

4 Answers4