使用jQuery动态添加Prev Next作为引导模式按钮

我似乎在使用jQuery动态添加按钮时遇到了问题，这些按钮丢失了。我已经验证了这些按钮是以前添加到DOM的

我有这个包含4个按钮。每个按钮都会打开一个模式，如下图所示

我使用jQuery向每个模式添加上一个和下一个按钮，除了第一个模式只添加下一个按钮，最后一个模式只添加上一个按钮。我正在使用jQuery执行此任务。代码如下：

$(function() {

  var $modals = $('[data-toggle="modal"]');
  var mCount = $modals.length;
  var el = $('.modal-footer').children();

  var prevButton = $("<button type='button' class='btn btn-default' data-dismiss='modal'>Prev</button>");
 var nextButton = $('<button type="button" class="btn btn-default" data-dismiss="modal">Next</button>');


  for (var i = 0; i < mCount; i++) {
    if ( i === 0 ) {
      $(el[i]).after(nextButton);
    } else if ( i === mCount -1 ) {
      $(el[i]).before(prevButton);
    } else {
      $(el[i]).before(prevButton);
      $(el[i]).after(nextButton); 
    }
  }
});

$（函数（）{
var$modals=$（'[data toggle=“modal”]'）；
var mCount=$modals.length；
var el=$（'.modal footer'）.children（）；
var prevButton=$（“Prev”）；
var nextButton=$（'Next'）；
对于（变量i=0；i

我用Chrome开发工具运行了一个跟踪，在每个循环的末尾设置了一个断点，我看到按钮被创建了。但是，在下一次迭代中，添加的按钮将从DOM中消失。希望有人能解释我做错了什么

jQuery完成1个循环后HTML中的第一个模式页脚。从ChromeDevTools粘贴这表明添加了“下一步”按钮：（到目前为止还不错）

接近
下一个

在第二圈之后。第一个模式页脚不再具有“下一步”按钮，但第二个模式页脚添加了“上一步”和“下一步”按钮。（第一模态上的按钮是如何移除的？）

上
接近
下一个

在第三个循环之后。第二个模式页脚不再具有“上一个”和“下一个”按钮。第三个模式页脚添加了上一个和下一个按钮

在第四个循环之后，第三个模式页脚的Prev按钮被移除（为什么？），第四个模式页脚是正确的。没有丢失的按钮。

更改

var prevButton = $("<button type='button' class='btn btn-default' data-dismiss='modal'>Prev</button>");

var prevButton=$（“Prev”）；

到

var prevButton=“Prev”；

（即删除

$（）

包装）

使用

$（“.”）时，将创建一个新节点，然后
.after
/
.before
将该节点移动到新位置

当您使用纯文本时，它会每次为您创建一个新节点，因此不会移动它。
更改

var prevButton = $("<button type='button' class='btn btn-default' data-dismiss='modal'>Prev</button>");

var prevButton=$（“Prev”）；

到

var prevButton=“Prev”；

（即删除
$（）
包装）

使用
$（“.”）时，将创建一个新节点，然后
.after
/
.before
将该节点移动到新位置

当您使用纯文本时，它会每次为您创建一个新节点，因此不会移动它。
我已更新了您的代码笔。请检查这里


//javascript对象模式
$（函数（）{
var$modals=$（'[data toggle=“modal”]'）；
var mCount=$modals.length；
var el=$（'.modal footer'）.children（）；
var prevButton=“Prev”；
var nextButton='Next'；
对于（变量i=0；i
我已经更新了你的代码笔。请检查这里


//javascript对象模式
$（函数（）{
var$modals=$（'[data toggle=“modal”]'）；
var mCount=$modals.length；
var el=$（'.modal footer'）.children（）；
var prevButton=“Prev”；
var nextButton='Next'；
对于（变量i=0；i
回答得很好。也许可以避免我在将来遇到重复这个错误的情况，因为我是从工作幻灯片上获取信息的。公平地说，这张幻灯片是正确的，但只适用于使用它的非常有限的场景，即添加一个
。在这些幻灯片中没有走得太远，因为它们很难阅读，但下一张幻灯片显示的是
price.appendTo（$（'.vacation'）
这也很混乱，因为它可能只是
price.appendTo（'.vacation'）
您还可以在for循环中声明
var prevButton
，它可以工作，因为每次都是不同的按钮。回答得很好。也许可以避免我在将来遇到重复这个错误的情况，因为我是从工作幻灯片上获取信息的。公平地说，这张幻灯片是正确的，但只适用于使用它的非常有限的场景，即添加一个
。在这些幻灯片中没有走得太远，因为它们很难阅读，但下一张幻灯片显示的是
price.appendTo（$（'.vacation'）
这也很混乱，因为它可能只是
price.appendTo（'.vacation'）
您还可以在for循环中声明
var prevButton
，它可以工作，因为每次都是不同的按钮。
var prevButton = $("<button type='button' class='btn btn-default' data-dismiss='modal'>Prev</button>");

var prevButton = "<button type='button' class='btn btn-default' data-dismiss='modal'>Prev</button>";

// javascript object patterns
$(function() {

  var $modals = $('[data-toggle="modal"]');
  var mCount = $modals.length;
  var el = $('.modal-footer').children();

  var prevButton = "<button type='button' class='btn btn-default' data-dismiss='modal'>Prev</button>";
 var nextButton = '<button type="button" class="btn btn-default" data-dismiss="modal">Next</button>';

  for (var i = 0; i < mCount; i++) {
    if ( i === 0 ) {
      $(el[i]).after(nextButton);
    } else if ( i === mCount -1 ) {
      $(el[i]).before(prevButton);
    } else {
      $(el[i]).before(prevButton);
      $(el[i]).after(nextButton); 
    }
  }
});