jQuery toLowerCase然后应用Capitalize CSS样式

我有一些html链接值，我需要从大写转换回小写，然后使用大写样式......问题的根源在于它已经到达它的大写字母，我不禁说，所以这是我的解决办法：jQuery toLowerCase然后应用Capitalize CSS样式

的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

来源

2016-09-14 Jake

可能的复制[先小写再大写文字它。这是可能的CSS？]（http://stackoverflow.com/questions/5280015/first-lowercase-the-text-then-capitalize-it-is-it-possible-with-css） – skobaljic

要写少你可以使用'$'而不是'jQuery' – DestinatioN

@sko是的，我曾经访问过这个问题，但我不明白结果。 – Jake

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

来源

2016-09-14 10:42:18

感谢您向我展示如何压缩此问题。非常有帮助。 – Jake

你真的很受欢迎，我很高兴得到了帮助！ :) –

如果我明白你的问题（toLowerCase不工作）正确的话，

更新从

linkText.toLowerCase();

到

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

来源

2016-09-14 10:38:39 nikhil

优秀@nikhil，谢谢！我是JS和jQuery的新手，所以这条新线让我感到困惑。为什么我需要再次使用'.html（）'，如果我已经在第2行上设置了它？ – Jake

因为您需要将字符串转换为小写字母，然后将其替换回DOM元素 – Ish

@Jake - 正如Ish指出的，第一个是getter并设置值，您需要传递该值。有关详细信息，请参阅此处的文档 - http://api.jquery.com/html/ – nikhil

对于这个工作，你需要首先使元素的文本更低e在应用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>

来源

2016-09-14 10:41:59

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

来源

2016-09-14 10:43:22 Ish

jQuery toLowerCase然后应用Capitalize CSS样式

回答

相关问题