使用jQuery查找并交换两个div

Question

目前正在开发一个响应式网站。当窗口大小调整为移动版时，我需要查找和重新排序一些div。现在我是这样做的：

$(window).resize(function() {
  var width = $(window).width();
  if( width < 768) {
    $('#id-1 .image-box').insertBefore($('#id-1 .text-box'));
    $('#id-2 .image-box').insertBefore($('#id-1 .text-box'));
    $('#id-3 .image-box').insertBefore($('#id-1 .text-box'));
  } else if( width > 767) {
    $('#id-1 .text-box').insertBefore($('#id-1 .image-box'));
    $('#id-2 .text-box').insertBefore($('#id-2 .image-box'));
    $('#id-3 .text-box').insertBefore($('#id-3 .image-box'));
  }
} );
$(window).resize();

有没有更有效的方法来做到这一点？我需要搜索一个div，在本例中是'.image-box'，检查前一个div的类，如果是'.text-box‘，则交换这两个。

谢谢你的帮助！

Answer 1

在等待HTML之前，这里有一种更具伸缩性的方法。

var elements = [
   $('#id-1'),
   $('#id-2'),
   $('#id-3')
];
var swap = function(firstSelector, secondSelector) {
    for ( var i = 0, l = elements.length; i < l; ++i ) {
        elements[i].find(firstSelector)
            .insertBefore(elements[i].find(secondSelector);
    }
};
$(window).resize(function() {
  var width = $(window).width();
  if( width < 768) {
    swap('.image-box', '.text-box');
  } else if( width > 767) {
    swap('.text-box', '.image-box');
  }
});
$(window).resize();