javascript - jQuery toLowerCase 然后应用 Capitalize CSS Style

Question

我有一些 html 链接值，我需要将大写字母转换回小写字母，然后使用大写字母设置样式...问题的根源在于它已经以大写字母形式出现，但我无能为力，所以这个是我的解决方法:

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>

jQuery:

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

目前，我没有看到通过 linkText.toLowerCase(); 转换回小写字母我确实看到文本转换代码被添加到每个链接，仅此而已。

Fiddle

Answer 1

您更改变量，linkText , 但您没有将小写字符串分配给 <a>元素。相反，请尝试:

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

或者，更简单地说:

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

或者，更明智的做法是，简单地使用一个 CSS 类来定位所有相关元素并将该类添加到这些元素:

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

连同 CSS 类:

.capitalize {
    text-transform: capitalize;
}