Question

我正在制作一种故事板，你可以在其中添加和删除帧，但我需要将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

使用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>：

{{1}}

Answer 2

如果你想并排排列元素，这些元素通常是块元素，因此默认使用css floats或css flexbox来定位在彼此之下。

Answer 3

我需要将div设置为彼此

尝试此示例将新故事容器添加到所有当前.container

＆＃13;

var i = 1;
$('.add__button').click(function() {
  i++;
  $(".container").each(function(x) {
    $(this).after('<div id="container' + x + '_' + i + '" class="container"><div class="frame"><div class="frame__outer"> <div class="frame__inner"></div><div class="frame__content">story ' + i + '</div></div></div></div>');
  });

});

＆＃13;

.frame__outer {
  padding: 20px;
  background: #222;
  color: white;
  border-bottom: solid 3px green;
  margin: 5px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="storyboard">
  <input type='button' value='add story' class="add__button" />
  <div id="container" class='container'>
    <div class="frame">
      <div class="frame__outer">
        <div class="frame__inner"></div>
        <div class="frame__content">story 1</div>
      </div>
    </div>
  </div>
</div>

＆＃13;

单击按钮/ JQuery时，将divs彼此相邻

3 个答案: