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

使用jQuery查找并交换两个div

1 个答案: