jQuery toLowerCase 然后应用 Capitalize CSS Style答案

【问题标题】：jQuery toLowerCase and then apply Capitalize CSS StylejQuery toLowerCase 然后应用 Capitalize CSS Style
【发布时间】：2017-01-22 03:13:24
【问题描述】：

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

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

【问题讨论】：

First lowercase the text then capitalize it. Is it possible with CSS?的可能重复
要少写可以使用$而不是jQuery
@sko 是的，我访问过这个问题，但我不明白结果。

标签： javascript jquery html css

【解决方案1】：

如果我正确理解了您的问题（toLowerCase 无法正常工作），那么

更新自

linkText.toLowerCase();

到

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

【讨论】：

优秀的@nikhil，谢谢！我是 JS 和 jQuery 的新手，所以这条新线让我感到困惑。如果我已经在第 2 行设置了，为什么还要再次使用 .html()？
因为你需要将字符串转换成小写，然后在DOM元素中替换回
@Jake - 正如 Ish 所指出的，第一个是 getter 并且要设置值，您需要传递值。有关详细信息，请参阅此处的文档 - api.jquery.com/html

【解决方案2】：

为此，您需要先将元素的文本设为小写，然后再将 CSS 规则应用于它们。

还请注意，您应该使用类而不是内联属性来应用规则，以便更好地分离关注点，并且也不需要each() 循环。试试这个：

$('.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>

【讨论】：

【解决方案3】：

您更改了变量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;
}

【讨论】：

感谢您向我展示如何将其浓缩。非常有帮助。
不客气，我很高兴能帮上忙！ :)

【解决方案4】：

检查这个：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");
});

【讨论】：