jquery - 伪选择器在 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')

我没有返回一个元素。我在这里做错了吗？

score 3 · Accepted Answer

由于您试图在 jQuery 中定位一个对象，因此您无法以这种方式获取第一个字母。您正在使用一个对象，而不是一个字符串。

第一个示例针对所有奇数对象，但第二个示例针对对象字符串（也称为第一个字母）。

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

score 2 · Accepted Answer

选择器不在 jQuery api 文档中。

我看不到另一种方法可以做到这一点：

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

score 1 · Accepted Answer

要将每个列表项的第一个字母大写，请执行以下操作：

$('.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;
}

3 回答 3