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

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

Answer 2

要获得第一个字母，

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

Answer 3

纯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>

Answer 4

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

您可以使用each()循环，然后prepend()每个p的首字母

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

Answer 6

试试这个：

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

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

6 个答案: