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();
转换回小写转换我看到文本转换代码被添加到每个链接,但就是这样。
您更改变量,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;
}
感谢您向我展示如何压缩此问题。非常有帮助。 – Jake
你真的很受欢迎,我很高兴得到了帮助! :) –
如果我明白你的问题(toLowerCase
不工作)正确的话,
更新从
linkText.toLowerCase();
到
jQuery(this).html(linkText.toLowerCase());
对于这个工作,你需要首先使元素的文本更低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>
检查这样的: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");
});
可能的复制[先小写再大写文字它。这是可能的CSS?](http://*.com/questions/5280015/first-lowercase-the-text-then-capitalize-it-is-it-possible-with-css) – skobaljic
要写少你可以使用'$'而不是'jQuery' – DestinatioN
@sko是的,我曾经访问过这个问题,但我不明白结果。 – Jake