如何使用jQuery在特定页面宽度上上下移动div的div

Question

I'm fairly new to Jquery and this is a bit out of my league.

I want to move a div to a different location, which I can accomplish with:

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

Now what I want to do is write an if statement that says if the screen width is 800px do:

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

else(screen width above 800px) put it back to its original location.

I've tried searching but it seems pretty specific.

Any ideas or is there a better way to accomplish what I want?

Thanks in advance for any help!

Answer 1

You can do something like this with jQuery:

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

As one commentor mentioned above, you might be able to do something like this using CSS.

Answer 2

You can get the index of the item in its parent container before you move it, then use screen width to move it back.

Something like this

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