CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jake
Jake

Reputation: 69

jQuery toLowerCase and then apply Capitalize CSS Style

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

Upvotes: 1

Views: 3390

Answers (4)

Ish
Ish

Reputation: 2105

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

Upvotes: 0

David Thomas
David Thomas

Reputation: 253308

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

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337550

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>

Upvotes: 2

Nikhil Aggarwal
Nikhil Aggarwal

Reputation: 28445

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

Update from

linkText.toLowerCase();

to 

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

Upvotes: 2

Related Questions