伪选择器与jQuery行为奇怪

Question

我正在与我的同学一起研究实验网站，我遇到了jQuery和CSS选择器的问题。让我回顾一下我所看到的问题。在我的CSS中，我正在链接伪选择器来执行一些简单的基于nth的样式：

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>

我瞄准的东西是这样的：

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中定位对象，因此无法获得第一个字母。 您正在使用对象，而不是字符串。

第一个示例是针对所有奇数对象，但第二个示例是目标字符串（a.k.a是第一个字母）。

所以你应该稍微拆分一下你的代码，首先拿一下对象文本，然后拿出它的第一个字母。

Answer 2

选择器不在jQuery api docs中。

我没有看到另一种方法来做到这一点：

$('.formatted-list li:first-child').text().substr(0,1);

Fiddle

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;
}