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樣式

回答

相關問題