将文本从大写更改为小写 jQuery答案

【问题标题】：Change text from uppercase to lowercase jQuery将文本从大写更改为小写 jQuery
【发布时间】：2016-11-22 13:19:39
【问题描述】：

我正在尝试将文本从大写更改为小写，但它不起作用

这是我尝试过的代码

HTML 结构

<div class="brand_name">
    <a href="#"> A-RET-TZ 0.1 %</a>
</div>

我试过的JS

$('.brand_name').val().toLowerCase();

我遇到的问题是页面上的文本默认为大写

请大家推荐

【问题讨论】：

$('.brand_name a').val() 将指向您需要的原始文本。
我也试过 $('.brand_name a') 但没有运气
您应该尝试将.val() 的辅助函数与相同的选择器一起使用。对不起，我提到.val()是错误的，你应该使用.text()
Change H1 content to lowercase with jquery的可能重复

标签： javascript jquery html

【解决方案1】：

这也可以使用纯 CSS 来实现。

div.brand_name > a {
  text-transform: lowercase;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="brand_name">
  <a href="#"> A-RET-TZ 0.1 %</a>
</div>

【讨论】：

如果这实际上是您的所有要求，您应该使用它。
我希望我可以使用它，但是，我尝试了 jquery 方式，因为我想在 text-transform:captilize 中格式化文本，但这不起作用，所以使用 jQuery 方式首先将其设为小写和然后从 CSS 到 Capitlize

【解决方案2】：

使用带有回调函数的text()方法根据旧内容更新文本内容。

$('.brand_name a').text(function(i, oldText) {
  return oldText.toLowerCase();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="brand_name">
  <a href="#"> A-RET-TZ 0.1 %</a>
</div>

【讨论】：

【解决方案3】：

需要设置anchor元素的文本，可以使用.text(fn)方法。

$('.brand_name a').text(function(i, text) {
  return text.toLowerCase();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="brand_name">
  <a href="#"> A-RET-TZ 0.1 %</a>
</div>

【讨论】：

【解决方案4】：

这是一个普通的javascript方式，有一点变化很好

document.querySelector(".brand_name a").innerHTML = document.querySelector(".brand_name a").innerHTML.toLowerCase();

<div class="brand_name">
  <a href="#"> A-RET-TZ 0.1 %</a>
</div>

【讨论】：

【解决方案5】：

使用text属性fiddle：

JS：

var $this = $('.brand_name a');
$this.text($this.text().toLowerCase());

【讨论】：