如何对以相同方式调整大小的多个DIV使用可调整大小/同时调整大小

Question

我想利用附加的代码来容纳多个DIV，并使用jquery函数resizable / alsoResize同时调整它们的大小。

对几个div进行硬编码很容易，但是我想创建一个循环，该循环可以处理需要使用AlsoResize的5,10或更多个div。

使用alsoResize的方式，使用它的div的大小调整方式与原始div的调整方式不同，实际上它们将沿相反的方向调整大小。看来以下代码可以帮助使所有div的尺寸朝正确的方向调整：

http://plnkr.co/edit/WCrmVU7gc9VFJfWh8UHJ?p=preview

代码：

    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <link data-require="jqueryui@1.10.0" data-semver="1.10.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/css/smoothness/jquery-ui-1.10.0.custom.min.css" />
    <script data-require="jqueryui@1.10.0" data-semver="1.10.0" src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>

<script>
    $( document ).ready(function() {  
    $('#div1').resizable({
        handles: 'all',
        alsoResize: '#div2',
        alsoResize: '#div3',
        start: function() {
            this.div2pos = $("#div2").offset();
            this.div3pos = $("#div3").offset();
        },
        resize: function(e, ui) {
            var left = ui.position.left - ui.originalPosition.left;
            var top = ui.position.top - ui.originalPosition.top;
            var pos2 = this.div2pos;
            $("#div2").offset({top: pos2.top + top, left: pos2.left + left});
            var pos3 = this.div3pos;
            $("#div3").offset({top: pos3.top + top, left: pos3.left + left});
        }
    });
    }); 

</script>        


<div id="div1" style="width:100px;height:100px;background-color:orange;margin:30px;float:left"></div>
<div id="div2" style="width:100px;height:100px;background-color:blue;margin:30px;float:left"></div>
<div id="div3" style="width:100px;height:100px;background-color:blue;margin:30px;float:left"></div>
<div id="div4" style="width:100px;height:100px;background-color:blue;margin:30px;float:left"></div>

我希望有一个循环能够解决多个div，而不是像上面那样手动对它们进行硬编码，但是我没有找到一种方法来实现。