如何将两个不相关的元素结合在一起？

Question

我正在开发一个界面，我需要一些东西来将两个不相关的元素连接在一起。那么，最重要的因素是“老板”，另一个叫做“员工”的元素将跟随“老板”，并相应地改变它的位置。

这是标记：

<div class="boss"></div>
<div class="employee"></div>
<div class="boss"></div>
<div class="employee"></div>
<div class="boss"></div>
<div class="employee"></div>
<div class="boss"></div>
<div class="employee"></div>

这就是我写的jQuery：

$('.boss').each(function( i, obj ){

        var Pos = $(this).position();
        var ModuleWidth = $(this).outerWidth();

        $(this).next('.employee').position({
                my: 'right top',
                at: 'right top',
                of: $(this)
        });

});

因此，我将遍历所有.boss类，并将所有.employees对齐到boss的右侧。他们应该一直坚持下去。但是，如果我在chrome工具中从boss编辑html，.boss元素将变得越来越小，和.employee将不会相应地重新定位。我想让.employee总是重新定位自己。

稍后更新：

这个http://screencast.com/t/F0RO7ODF就是我要找的那种行为。灰色盒子是老板，橙色盒子是员工。这两个元素有一个包装器，我实际上是在移动包装器。但我想要一个没有包装的解决方案。备注:魔格盒的位置是相关的。

Answer 1

N一般情况下，当希望元素相互关联时，它们应该在一个元素中分组。要表示层次结构，最好也开发您的html以尊重您希望表示的层次结构。这将强制您在移动boss元素时在视频中显示的行为。

对于这个特殊的例子，它也可以扩展到部门或角色。参见JSFiddle，例如：http://jsfiddle.net/9dw5dvqw/

更新：http://jsfiddle.net/en85bm9h/

<ul class="bosses">
    <li class="boss">
        <span class="boss-name"></span>
        <ul class="employees">
           <li class="employee">
               <span class="employee-name"></span>
           </li>
           <li class="employee">
               <span class="employee-name"></span>
           </li>
        </ul>
    </li>
    <li class="boss">
        <span class="boss-name"></span>
        <ul class="employees">
           <li class="employee">
               <span class="employee-name"></span>
           </li>
           <li class="employee">
               <span class="employee-name"></span>
           </li>
        </ul>
    </li>
</ul>

CSS

*{ margin: 0; padding: 0; }
body,
html{ height: 100%; }
ul{ list-style: none; overflow: hidden; float: left; }
li{ overflow: hidden; }

.bosses{ width: 100%; height: 100%; }
.boss{ margin: 20px 5px 20px 0; float: left; }
.boss-name{ display: block; background-color: #eee; float: left; width: 120px; height: 80px; cursor: move; }
.employees{ float: left; width: 50px; height: 120px; background-color: red; }