Question

现在我在我的项目中有多个PHP for循环，就像下面的一样，但当然有不同的PHP变量。我还有一个添加按钮，附加一个div元素。问题是因为我有很多for循环，每个for循环都有一个添加按钮，所以当我点击一个特定div的一个添加按钮时，它会向所有人添加一个新的div。

<div class="appendOuter">
 <?php 
     foreach($query as $data){
     $id = $data['ID'];
     $initialAccess = $data['Access'];
     if(strlen($initialAccess) > 3){
     echo   '
          <div class="box" >
            <input type="hidden" value='.$id.' class="ID">
             <textarea class="Access">'.$Access.'</textarea>
         </div>';
             }
         }
 ?>
    <div class="text-center">
       <button class="btn btn-success btn-add" type="button" onclick="addMorediv(this)">
       <span class="glyphicon glyphicon-plus"></span>
       </button>
      </div>      
</div>

我的javascript附加新div

<script>
function addMorediv(index){
  var element =$("<div class='box'><textarea class='Access'></textarea><i class='far fa-flag'></i></div>");
  element.appendTo('.appendOuter');      
 }
  </script>

Answer 1

假设您的所有其他HTML结构与您演示的相似：

element.appendTo($(this).parent().parent());

Answer 2

你正在寻找这样的东西吗？当您单击“添加”按钮时，它会在该行中已存在的textarea下添加新文本区域？这是一个jQuery特定的答案，并不需要您使用的"onclick"按钮。它还在父"row" div中添加您的内容，以便在点击事件期间轻松访问DOM。因此，在PHP for循环中，您将在我的示例中回显出1个行，在适当的位置使用PHP变量，如示例所示。

＆＃13;

$('.btn-add').on('click', function() {
  var $box = $(this).parent().parent().find('.box:last');
  var $element = $("<div class='box'><textarea class='Access'></textarea><i class='far fa-flag'></i></div>");
  $element.appendTo($box);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="appendOuter">

  <!-- Assume your PHP generated 3 ".row" div rows in for loop -->

  <div class="row">
    <div class="box">
      <input type="hidden" value="1" class="ID">
      <textarea class="Access">1</textarea>
    </div>
    <div class="text-center" style="padding:10px;">
      <button class="btn btn-success btn-add" type="button">
       <span class="glyphicon glyphicon-plus">Add +</span>
       </button>
    </div>
  </div>

  <div class="row">
    <div class="box">
      <input type="hidden" value="2" class="ID">
      <textarea class="Access">2</textarea>
    </div>
    <div class="text-center" style="padding:10px;">
      <button class="btn btn-success btn-add" type="button">
       <span class="glyphicon glyphicon-plus">Add +</span>
       </button>
    </div>
  </div>

  <div class="row">
    <div class="box">
      <input type="hidden" value="3" class="ID">
      <textarea class="Access">3</textarea>
    </div>
    <div class="text-center" style="padding:10px;">
      <button class="btn btn-success btn-add" type="button">
       <span class="glyphicon glyphicon-plus">Add +</span>
       </button>
    </div>
  </div>


</div>

＆＃13;

如何将div附加到另一个div

2 个答案: