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

在父级上使用.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>

Answer 3

$(".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)")

eq（0）用于获取该类的第一个元素，根据需要进行更改

Jquery在Div内添加按钮

3 个答案: