仅当2个或更多段落时在1段落之后插入按钮

Question

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

jQuery(document).ready(function($) {

if ( $('p').length < 1 ) { 

$('p:last-child').after('<div id="toggle" class="btn">Read More</div>');

$('p').not('.entry-content p:first-child').wrap('<div class="text" />');  

}

$("#toggle").click(function() {

    var elem = $("#toggle").text();

    if (elem == "Read More") {

      $("#toggle").text("Read Less");
      $("#text").slideDown("slow");

    } else {

      $("#toggle").text("Read More");
      $("#text").slideUp("fast");
    }

  }); });



<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>

<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>

<p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p>

I only want to add the button after the first paragraph if there's 2 or more paragraphs.

The jQuery adds the button after the 1st paragraph. I don't want it added if there's only 1 paragraph of text in each article. I only want it added when there's at least 2 paragraphs.

Update : Basically, if there's only 1 paragraph, i don't need any of the jQuery to run so i guess i simply need a conditional.

Update 2 : Like this but for paragraphs http://jsfiddle.net/RyqJ9/

Answer 1

You have to check for condition for each of the text div with $(".text").each(function() with if((textBox.find('p').length)>1) so that if there are two or more p then you will show the button for that text div

Here is a sample code.

 $(document).ready(function(){ $(".content .entry-content").each(function(){ var contentBox = $(this); if (contentBox.find('p').length > 1){ var lastOne = contentBox.find('p').length - 1; contentBox.append('<div id="toggle" class="btn">Read More</div>'); $('.content .entry-content p').not('.entry-content p:first-child').wrap('<div class="text" />'); contentBox.find(".text").hide(); contentBox.find(".btn").click(function(){ if($(this).attr('class').indexOf('btnDown')==-1){ contentBox.find(".text").slideDown("slow"); $(this).addClass("btnDown"); $(this).html("Read Less"); }else{ contentBox.find(".text").slideUp("slow"); $(this).removeClass("btnDown"); $(this).html("Read More"); } }); } }); }); 

 .text{ background-color:green; margin:5px 0; } .btn{ background-color:red; } .content{ border:2px solid black; margin:5px 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="content"> <div class="entry-content"> <p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p> <p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p> <p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p> </div> </div> <div class="content"> <div class="entry-content"> <p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p> <p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p> <p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p> </div> </div> <div class="content"> <div class="entry-content"> <p>This is an example of a post, you could edit this to put information about yourself or your site so readers know where you are coming from. You can create as many posts as you like in order to share with your readers what is on your mind.</p> </div> </div> 

Answer 2

Have you tried something like this (untested)? Or if you're trying to append it to the bottom of the paragraph, rather than after it, use append() instead of after() .

$(function($) {
  if($('p:nth-child(2)').length) {
    $('p:first-child').after('<div id="toggle" class="btn">Read More</div>');
  }
});