關於在Div中使用jQuery重新排序內容的問題

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++; 
    } 
});