jQuery的追加按鈕內部事業部

Question

我有這段代碼塊：

<div class="services"> 
    <div class="grid grid-pad"> 

     <?php 
     query_posts(array('post_type' => 'services', 'posts_per_page' => -1)); 

     while (have_posts()) : the_post(); 
      ?> 

      <div class="col-1-3 tri-clear"> 
       <div class="single-service"> 
        <i class="fa <?php echo types_render_field("icon", array("output" => "raw")); ?> service-icon"></i> 
        <?php the_title('<h3 class="service-title">', '</h3>'); ?> 
        <?php the_content('<p>', '</p>'); ?> 
       </div> 
      </div> 

     <?php endwhile; ?> 

     <!-- how to add button here? --> 

    </div> 
</div> 

我想補充<button>Contact Us</button>那裏（我的地方標記）。由於我無法編輯源代碼的原因，但我可以添加自定義JavaScript（使用jQuery）添加按鈕。如何實現它？

感謝您的諮詢。

Answer 1

嘗試此代碼：

jQuery('.services .grid.grid-pad').append('<button>Contact us</button>'); 

Answer 2

$(".tri-clear:eq(0)").after().append("<button>Contact Us</button>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="col-1-3 tri-clear"> 
 
This is your content 
 
</div>

在

$(".tri-clear:eq(0)") 

當量（0）用於與該類獲得的第一個元素，將其更改爲您的需求

Answer 3

對父母使用.append。這會將它添加爲最後一個孩子。

$('.grid-pad').append('<button>Contact Us</button>')

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

 
<div class="services"> 
 
    <div class="grid grid-pad"> 
 

 

 
    <div class="col-1-3 tri-clear"> 
 
     <div class="single-service"> 
 
     <i class="fa service-icon"></i> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="col-1-3 tri-clear"> 
 
     <div class="single-service"> 
 
     <i class="fa service-icon"></i> 
 
     </div> 
 
    </div> 
 
    
 
    <div class="col-1-3 tri-clear"> 
 
     <div class="single-service"> 
 
     <i class="fa service-icon"></i> 
 
     </div> 
 
    </div> 
 

 
    <!-- how to add button here? --> 
 

 
    </div> 
 
</div>