更新

Question

通过示例最好地说明了这个问题：

所需的效果是单击“插入行”以在指示的列之后插入全宽行（由类.insertion-point指示）。我遇到的问题是，不是先关闭当前行，而是开始一个新行，它只是在主行中嵌入一个新行。

如何在任何给定列之后关闭当前行，创建一个新行，关闭该行，然后继续显示“数据”列？

HTML：

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-sm-4 item">
        Data
      </div>
      <div class="col-sm-4 item insertion-point">
        Data
      </div>
      <div class="col-sm-4 item">
        Data
      </div>
      <div class="col-sm-4 item">
        Data
      </div>
      <div class="col-sm-4 item">
        Data
      </div>
      <div class="col-sm-4 item">
        Data
      </div>
    </div>
  </div>
  <button class="btn btn-primary insert-row">Insert Row</button>
</body>
</html>

CSS：

.item {
  border: 1px solid #f00;
}

.pane {
  background: #999;
  height: 100px;
}

JavaScript的：

$('.insert-row').on('click', function() {
  code = '</div><!--end row--><div class="row"><div class="col-sm-12 pane"></div></div>';

  $('.insertion-point').after(code);
});

编辑：

上面的代码字符串可能以<div class="row">结尾以重新打开该行。但我试过了，它仍然无效。

这里的问题是在视觉上看起来我的解决方案有效。虽然实际上它正在创建糟糕的HTML。

进一步解释（我认为这很难解释）。这是正在发生的事情，这不是我想要的：

enter image description here

我需要将插入的行与错误插入的行放在同一级别。

jQuery操作后所需的HTML

  <div class="container">
    <div class="row">
      <div class="col-sm-4 item">
        Data
      </div>
      <div class="col-sm-4 item insertion-point">
        Data
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 pane"></div>
    </div>
    <div class="row">
      <div class="col-sm-4 item">
        Data
      </div>
      <div class="col-sm-4 item">
        Data
      </div>
      <div class="col-sm-4 item">
        Data
      </div>
      <div class="col-sm-4 item">
        Data
      </div>
    </div>
  </div>

进一步的Ramblings

也许，因为这是Bootstrap，我可以通过某种方式使用网格系统来产生同样的效果。

Answer 1

我解决了这四个你：JsFiddle

$(document).ready(function() {
    var firstRow = $('.row');
    $('.insert-row').on('click', function() {
        var code = $('<div/>', {clas: 'row'}).append($('<div/>', {class: "col-sm-12 pane"})),
            row = $('<div/>', {class: 'row'}),
            items = $('.insertion-point').nextAll();
        row.append(items);        

        firstRow.after(row);
        firstRow.after(code);
    });
});

更新

通过jQuery看到nextAll函数之后..这会快得多：

updated fiddle

Answer 2

以下代码可以解决您的问题。查看代码段和演示：

＆＃13;

$('.insert-row').on('click', function() {
  var row = $('<div/>',{class:"row"}),
      code = '<!--end row--><div class="row"><div class="col-sm-12 pane">New</div></div>',
      rest = $('.insertion-point').nextAll(),
      dest = $('.insertion-point').closest('.row');
  dest.after( row.append( rest ) ).after( code );
});

＆＃13;

<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>

<div class="container">
    <div class="row">
      <div class="col-sm-4 item">
        Data
      </div>
      <div class="col-sm-4 item insertion-point">
        Data
      </div>
      <div class="col-sm-4 item">
        Data
      </div>
      <div class="col-sm-4 item">
        Data
      </div>
      <div class="col-sm-4 item">
        Data
      </div>
      <div class="col-sm-4 item">
        Data
      </div>
    </div>
  </div>
  <button class="btn btn-primary insert-row">Insert Row</button>

＆＃13;

Answer 3

我认为你需要的是appendTo，它会将html附加到指定的标签上。在这种情况下，您希望在行上添加div。

http://api.jquery.com/appendto/

Answer 4

只需删除code变量中的结束标记，您的代码就可以正常运行

code = '</div><!--end row--><div class="row"><div class="col-sm-12 pane"></div></div>';

应该是

code = '<div class="row"><div class="col-sm-12 pane"></div></div>';

您还需要在其他行之后/之前插入行，如此

$('.insert-row').on('click', function() {
    code = '<div class="row"><div class="col-sm-12 pane"></div></div>';  
    $('.insertion-point').closest(".row").after(code);
});

上面的代码找到了你想要插入的位置（由于你想在一个唯一元素之后插入，我将其更改为id选择器）。但是，您希望找到最接近的父元素（或此元素），即row，以便在该行之后插入一行。这样，您可以选择要插入的行或列，并且它将始终在最近的行之后正确插入一行。

幸运的是，当涉及HTML中的语法错误时，浏览器非常宽容。他们将删除初始结束标记（这是不必要的）并使用HTML的其余部分。但是有些浏览器可能表现不同，这就是你必须要小心的。

Answer 5

您需要在第一个之后添加一个新行，方法是删除插入点之后的元素并将它们包含在新行中。

插入html时，不能像处理文本编辑器那样对待DOM。

 $('.insert-row').on('click', function() { 

     var $insertEL=$('.insertion-point');
     var code = '<div class="row"><div class="col-sm-12 pane"></div></div>';
      /* create new row and append all siblings after insertion point element*/
      var $newRow=$(code).append($insertEL.nextAll());
      /* add new row to DOM*/
      $insertEL.closest('.row').after($newRow);

});

的 DEMO

Answer 6

知道了！

使用Bootstrap网格解决布局，非常少的jQuery DOM操作。我不知道为什么我之前没有想到这一点。啧。我一直在不停地编码好几个小时，我的大脑都在煎炸。

解决方案：http://jsbin.com/zopiquzore

这是对的，是吗？

无法使用$ .after（）来关闭div标签

jQuery操作后所需的HTML

进一步的Ramblings

6 个答案:

更新

知道了！