有沒有辦法用jquery將元素移到其父元素之外？

Question

我的結構是這個html：

<div class="aside_listings">
     <div>
          <div>
               <!--a bunch of content-->
          </div>
     </div>
     <div class="toolbar search_options">
          <!--a bunch more content-->
     </div>
</div>

CSS

.aside_listings {
height: 483px;
width: 440px;
overflow-y: scroll;
overflow-x: hidden;
margin-top: 24px;
}

所以上面的代碼按照需要的方式工作，我需要一個滾動頁面，因為它是一個非常長的產品列表。 在列表的底部是一個搜索欄（第1頁，第2頁，第3頁等），我需要在'.aside_listings'div之外。 這都是由我無法觸及的代碼生成的。 我在css中查找了如何執行此操作，並將這些樣式添加到'.search_options'中

position: absolute;
margin-top: -50px;
font-size: 18px;
color: #999999;
margin-left: 13px;
width: 418px;

表面上看起來似乎有效，但如果您導航到其他頁面之一或優化搜索區域，它會根據列表中顯示的產品數量跳轉。

有沒有辦法在jquery中將其移到父元素之外？

謝謝

Answer 1

如果要移動.toolbar之后.aside_listings在DOM中，你可以這樣做：

var $toolbar = $('.aside_listings > .toolbar');
$toolbar.parent().after($toolbar);

Answer 2

var $divElement = $(".aside_listings.search_options");
var html = $divElement.html();
$divElement.remove();
$(".aside_listings").after(html);