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