javascript - 单击按钮/JQuery 时使 div 彼此相邻

Question

我正在制作一种 Storyboard，您可以在其中添加和删除框架，但我需要将 div 设置为彼此相邻，我现在拥有的代码将 div 彼此放在一起。我想用循环来做 这是我的代码:

HTML

<div id="storyboard">
  <div id="container">
    <div class="frame">  
      <div class="frame__outer"> 
        <div class="frame__inner"></div>
        <div class="frame__content"></div>
        <div type="button" value="fade_in" class="add__button"> + </div>
      </div>
    </div>
  </div>
</div>

JS

_this.addClickFunction = function() {
  var i = 0;
  $('.add__button').click(function() {
      $('.frame').after('<div id="container'+(i++)+'"></div> <div class="frame__outer"> <div class="frame__inner"></div><div class="frame__content"></div></div>');
  });
};

Answer 1

使用 append() 代替 after() 函数。这应该有效:

_this.addClickFunction = function() {
  var i = 0;
  $('.add__button').click(function() {
      $('.frame').append('<div id="container'+(i++)+'"></div> <div class="frame__outer"> <div class="frame__inner"></div><div class="frame__content"></div></div>');
  });
};

这适用于保留一个 .frame 元素并向其添加结构的多个 div:

<div class="container[i]">  
      <div class="frame__outer"> 
        <div class="frame__inner"></div>
        <div class="frame__content"></div>
      </div>
</div>