当超过1段时，为每篇文章的第1段后附加Div

Question

是否可以在每篇文章的第一段文字之后追加（而不是使用.after（））HTML div，只有当每篇文章至少有2段时，否则不要添加div？

＆＃13;

＆＃13;

 $('.content').each(function() {
  var $this = $(this);
  if ($this.children('p').length >= 2) {  
      $this.append('<div id="toggle">Read More</div>');
      $('p').not('p:first-child').wrap('<div class="text" />');
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="content">
<p>This is an example of a paragraph</p>
<p>This is an example of a paragraph</p>
</div>

<div class="content">
<p>This is an example of a paragraph</p>
</div>

<div class="content">
<p>This is an example of a paragraph</p>
<p>This is an example of a paragraph</p>
<p>This is an example of a paragraph</p>
</div>

＆＃13;

＆＃13;

＆＃13;

这是我需要实现的目标。只有当每个内容div的文本超过1段时才会添加div。

<div class="content">
<p>This is an example of a paragraph</p>
<div class="text" />
<p>This is an example of a paragraph</p>
<div id="toggle">Read More</div>
</div>

<div class="content">
<p>This is an example of a paragraph</p>
</div>

<div class="content">
<p>This is an example of a paragraph</p>
<div class="text" />
<p>This is an example of a paragraph</p>
<div id="toggle">Read More</div>
</div>

Answer 1

你太近了！

$('.content').each(function() {
  var $this = $(this);
  if ($this.children('p').length >= 2) {  
      $this.append('<div id="toggle">Read More</div>');
  }
});

.content {
border:1px solid red;
margin-bottom:10px;
}

.content p {
margin:0;
}

.content #toggle {
margin-top:5px;
color:cyan;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="content">
<p>This is an example of a paragraph</p>
<p>This is an example of a paragraph</p>
</div>

<div class="content">
<p>This is an example of a paragraph</p>
</div>

<div class="content">
<p>This is an example of a paragraph</p>
<p>This is an example of a paragraph</p>
<p>This is an example of a paragraph</p>
<p>This is an example of a paragraph</p>
</div>


<div class="content">
<p>This is an example of a paragraph</p>
</div>


<div class="content">
<p>This is an example of a paragraph</p>
<p>This is an example of a paragraph</p>
<p>This is an example of a paragraph</p>
<p>This is an example of a paragraph</p>
<p>This is an example of a paragraph</p>
<p>This is an example of a paragraph</p>
</div>

Answer 2

  

是否可以在每篇文章的第一段文本之后追加（而不是使用.after（））HTML div，只有当每篇文章至少有2个段落时，否则不添加div？

- 答案：是的，这是可能的。

注意： 您的id="toggle"不是唯一的，每页只能有一个唯一的ID，或者您在互联网上爆炸。< / em>的

实施例

let $read = $('<div class="read">Read More</div>');
let $text = $('<div class="text"></div>');

$(document).ready(function() {

  $('.content').filter(function() {
    return $(this).find('p').length > 1;
  }).append($read.clone()).find('p:first').after($text.clone());

});

.content {
  border: 1px solid #999;
  margin-bottom: 1rem;
}

.read {
  background: #eee;
  border-top: 1px solid #999;
  color: #369;
  text-align: center;
}

.text {
  background: #9c9;
  padding: .5rem;
}

p {
  margin: 0;
  padding: 1rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="content">
  <p>This is an example of a paragraph</p>
  <p>This is an example of a paragraph</p>
</div>

<div class="content">
  <p>This is an example of a paragraph</p>
</div>

<div class="content">
  <p>This is an example of a paragraph</p>
  <p>This is an example of a paragraph</p>
</div>