如何使用jQuery在特定頁面寬度上上下移動div的div

Question

我對Jquery還是很陌生，這有點超出我的范圍了。

我想將div移到其他位置，可以用以下方法完成：

$('#searchbar').insertAfter('.search-item');

現在我想做的是編寫一條if語句，說明屏幕寬度是否為800px，請執行以下操作：

$('#searchbar').insertAfter('.search-item');

else（屏幕寬度超過800像素）將其放回原始位置。

我嘗試搜索，但似乎很具體。

有什么想法或有更好的方法來實現我想要的嗎？

在此先感謝您的幫助！

Answer 1

您可以使用jQuery執行以下操作：

$(window).on("resize", function() { //or $(window).resize(function() {
    var w = $(this).width();
    if (w < 800) {
        //do less than action
    } else {
        //do else action
    }
});

正如上面提到的一個評論者，您也許可以使用CSS來執行類似的操作。

Answer 2

您可以在移動項目之前在其父容器中獲取該項目的索引，然后使用屏幕寬度將其移回。

像這樣

var searchbar = $('#searchbar');

// Get the parent container of the bar.
var parent = searchbar.parent();

// Get the starting location of the bar.
var index = parent.index(searchbar);

if($(window).width() >= 800){
    // Insert the bar after the '.search-item'
    searchbar.insertAfter('.search-item');
}
else{
    // Insert the bar in its original location
    $(parent.children()[index]).before(searchbar);
}