javascript - 从特定 div javascript/jquery 获取每个段落的第一个字母

Question

我想使用 javascript 或 jquery 从特定 div 获取每个段落的第一个字母，并将该字母附加到同一段落中。

这是我的 html 代码:

<div id="about-content" class="aboutus-entry-content">
    <p>Maecenas facilisis nec velit Integer lacinia eros vitae risus euismod interdum. Nam ornare cursus nulla, ac pulvinar velit congue eu. Quisque vehicula nulla vel accumsan convallis.</p>
    <p>Curabitur iaculis sodales turpis non feugiat. Praesent scelerisque varius mi eu molestie. Etiam vitae mi augue. Nulla fringilla congue scelerisque. Donec eget pretium leo. Aenean nunc est, elementum</p>

    <p>Nunc eget ullamcorper nunc. Ut ac elit lacus. Sed placerat vestibulum est. Ut nec pulvinar turpis, quis aliquam libero.</p>

</div>

示例:

<div id="about-content" class="aboutus-entry-content">
    <p>Maecenas facilisis</p>
    <p>ullamcorper nunc</p>
</div>

预期输出:

<div id="about-content" class="aboutus-entry-content">
    <p>
        <div class="first-letter">M</div>
        Maecenas facilisis</p>
    <p>
        <div class="first-letter">u</div>
        ullamcorper nunc</p>
</div>

Answer 1

试试这个:

$(document).ready(function() {
    $("p").each(function(index) {
        var textN = $(this).text();
        var firstWord = textN.charAt(0);
        console.log(index + ": " + firstWord);
        $(this).prepend('<div class="first-letter">' + firstWord + '</div>');
        /*$(this).append('<div class="first-letter">'+firstWord+'</div>');*/
    });
});

Demo JSFiddle