点击时出现的jQuery出现在html中的另一个元素

Question

例如我有这个html代码：

<div class="product">
    <p>Name1<p>
</div>
<div class="product">   
    <p>Name2<p>
</div>
<div class="product">
    <p>Name3<p>
</div>
<div class="product">
    <p>Name4<p>
</div>
<div class="settings">
    <p>SETTINGS<p>
</div>

我将设置类设置为在CSS中不显示任何内容，除非单击产品类中的4个p元素之一。 单击后，设置类别将按原样显示在底部。

如果我单击例如Name2，那么应该如何设置，则设置类出现在Name2之后而不是在底部？

Answer 1

您可以使用.insertAfter() ：

 $(function(){ $('.product p').click(function(){ $('.settings').insertAfter($(this).closest('.product ')) }); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="product"> <p>Name1<p> </div> <div class="product"> <p>Name2<p> </div> <div class="product"> <p>Name3<p> </div> <div class="product"> <p>Name4<p> </div> <div class="settings"> <p>SETTINGS<p> </div> 

Answer 2

使用$(this)定位您单击的元素，结合insertAfter()将内容添加到此元素。

运行下面的代码段，然后单击具有类名product任何元素，以查看其工作原理。

$(".product").click(function(){
    $(".settings").insertAfter($(this));
});

  $(".product").click(function(){ $(".settings").insertAfter($(this)); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="product"> <p>Name1 <p> </div> <div class="product"> <p>Name2 <p> </div> <div class="product"> <p>Name3 <p> </div> <div class="product"> <p>Name4 <p> </div> <div class="settings"> <p>SETTINGS <p> </div> 

Answer 3

你可以这样

$(".product > p").click(function(){
 var $parent = $(this).parent(".product");
 $parent.siblings(".settings").insertAfter($parent);
});

通过使用.insertAfter()

DEMO