I am creating a seating application using jQuery. I have tables with chairs around them that can have guests seated on chairs. Each table has a wrapper div that is draggable. There are any number of chairs inside the table. A guest can sit in any side chair. Guests are also a div, which is nested in a div chair. Here is an example for marking up one such table. This table has 8 shines with two guests sitting on the first two chairs.
<div id="table-wrapper-1" class="table-wrapper table-type-0 ui-draggable">
<div id="table-1" class="seating-table">
<div class="seating-table-name">Table 1</div>
</div>
<div id="chair-1-0" class="chair chair-pos-0 table-chair-1">
<div title="Elaine Benis" id="guest-2-5-2" class="guest guest-2 ui-draggable"></div>
</div>
<div id="chair-1-1" class="chair chair-pos-1 table-chair-1">
<div title="Elaine Benis" id="guest-2-5-2" class="guest guest-2 ui-draggable"></div>
</div>
<div id="chair-1-2" class="chair chair-pos-2 table-chair-1"></div>
<div id="chair-1-3" class="chair chair-pos-3 table-chair-1"></div>
<div id="chair-1-4" class="chair chair-pos-4 table-chair-1"></div>
<div id="chair-1-5" class="chair chair-pos-5 table-chair-1"></div>
<div id="chair-1-6" class="chair chair-pos-6 table-chair-1"></div>
<div id="chair-1-7" class="chair chair-pos-7 table-chair-1"></div>
</div>
div.table - , div.guest. , . , , - IE, , , , . - , ?
,
~ Matt