jquery - 使用 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();