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

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

这里是我的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>

来源

2016-08-22 Hammad Munir

您的预期输出的一个例子是好的。 – Phylogenesis

'$（'＃about-content p'）。each（function（）{（012）};（this.textContent.substr（0,1））; }）;' – Rayon

@增加了植物生成示例。 –

试试这个：

$(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

来源

2016-08-22 12:51:55

$("#about-content > p").each(function(){ 
 
    var first_letter = $.trim($(this).text().split(""))[0]; 
 
    $(this).append(" "+first_letter) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<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>

01如果

来源

2016-08-22 12:47:20

要获得的第一个字母，

var firstLetterArray = $("#about-content p").map(function() { 
    return $(this).text().trim().charAt(0); 
}).get();

来源

2016-08-22 12:47:33

纯JavaScript ...不知道用IE ahaha

<html> 
<head> 
<script> 
function takeP(){ 
var d = document.getElementById("about-content"); 
var allP = d.getElementsByTagName("p"); 
for(var i = 0;i<allP.length;i++){ 
console.log(allP[i].innerHTML.substring(0,1)); 
} 
} 
</script> 
</head> 
<body onload='takeP();'> 
<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> 
</html>

来源

2016-08-22 12:47:46

$('#about-content p').each(function() { 
 
    this.textContent=this.textContent+this.textContent.substr(0, 1); 
 
    console.log(this.textContent.substr(0, 1)); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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>

来源

2016-08-22 12:48:57

作品可以使用each()循环，然后prepend()每个的第一个字母

$('#about-content p').each(function() { 
 
    $(this).prepend('<div class="first-letter">' + $(this).text().charAt(0) + '</div>') 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="about-content" class="aboutus-entry-content"> 
 
    <p>Maecenas facilisis</p> 
 
    <p>ullamcorper nunc</p> 
 
</div>

来源

2016-08-22 12:51:09

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

回答

相关问题