與jQuery奇怪行爲的僞選擇器

Question

我正在與我的同學一起在實驗性網站上工作，我遇到了jQuery和CSS選擇器的問題。讓我來回顧一下我所看到的問題。在我的CSS我鏈接僞選擇做一些簡單的基於第n-造型像這樣：

HTML：

<ul class="formatted-list"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
    <li>Item 5</li> 
</ul> 

我瞄準的東西與NTHS像這樣：

CSS：

.formatted-list li:nth-child(odd) { ... } 
.formatted-list li:first-child:first-letter { ... } 

第一個選擇器在CSS和jQuery中都能正常工作。但是，當我嘗試以下列代碼爲目標時：

$('.formatted-list li:first-child:first-letter') 

我沒有返回元素。我在這裏做錯了什麼？

Answer 1

選擇器不在jQuery api docs中。

我沒有看到另一種方式來做到這一點則是：

​​

Fiddle

Answer 2

由於您試圖在jQuery中定位一個對象，因此無法獲得第一個字母。 您正在使用一個對象，而不是一個字符串。

第一個例子是針對所有奇怪的物體，但第二個例子是針對對象字符串（a.k.a第一個字母）。

所以你應該分開你的代碼，先把對象文本，然後把它的第一個字母。

Answer 3

以大寫每個列表項的第一個字母，這樣做：

$('.formatted-list li').each(function(idx) { 
    var txt = $(this).text(); 
    $(this).text(txt.charAt(0).toUpperCase() + txt.slice(1)); 
}); 

這裏的另一種純CSS解決方案，以便將列表項中每個單詞的首字母大寫：

.formatted-list li { 
    text-transform: capitalize; 
}