Question

请您查看this demo并告诉我为什么我无法重新安排.popover-content课程中的按钮。我想做的是在#pop上每次点击时显示按钮的顺序不同，你可以看到我正在使用

$("#pop").on("click", function(){
    $('.popover-content > button').each(function() {
      $(this).prependTo(this.parentNode);
    });
});

但它没有重新排序按钮！

var appcontent = '<button class="btn btn-success btn-block">Item 1</button><button class="btn btn-warning btn-block">Item 2</button><button class="btn btn-info btn-block">Item 3</button>';
$("#pop").popover({
  html: 'true',
  title: "<span class='date-title'>Hello</span>",
  content: appcontent
}).on('shown.bs.popover', function() {
  var popup = $(this);
  $(this).parent().find("div.popover .close").click(function() {
    popup.click();
  });
});

$("#pop").on("click", function() {
  $('.popover-content > button').each(function() {
    $(this).prependTo(this.parentNode);
  });
});

body {padding:100px;}
.popover {min-width:250px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <h3>Bootstrap 3 Popover Reordering Content Example</h3>
<button class="btn btn-default"  id="pop">POP UP</button>
</div>

Answer 1

在我看来，按钮正在重新排序，但默认情况下，弹出窗口消失得太快。

编辑2：看起来你需要一个值来跟踪状态;试试这个：

 <div class="container">
      <h3>Bootstrap 3 Popover Reordering Content Example</h3>
    <button class="btn btn-default" id="pop">POP UP</button>
    </div>

和

var appcontent = '<button class="btn btn-success btn-block">Item 1</button><button class="btn btn-warning btn-block">Item 2</button><button class="btn btn-info btn-block">Item 3</button>';
var count = 0;

$("#pop").popover({
            html: 'true',
        title : "<span class='date-title'>Hello</span>",
        content : appcontent
  }).on('shown.bs.popover', function() {
    var popup = $(this);
    $(this).parent().find("div.popover .close").click(function() {
      popup.click();
    });
  }); 

$("#pop").on("click", function(){
  if (count == 2) {
    $('.popover-content > button').each(function() {
      $(this).prependTo(this.parentNode);
    });
   count = -1;
  }
  else if ($('.popover:visible').length == 1) {
    count++;
  }
});

使用jQuery解决在Div中重新排序内容的问题

1 个答案: