将生成的div分组到其他生成的div

Question

我的意思是使用for loop创建的div。有从这样的功能创建的“表格”div，和从另一个创建的“主席”div。所有桌子都有id元素，所有椅子都有class元素。桌子的数量是不固定的，但椅子数量是和应该总是桌子数量的6倍;桌子顶部和底部每张桌子6把椅子。

此代码创建表格。

for (var i = 0; i < defaultSettings.numberofTables; i++) { 
     newTable = $('<div id="table' + i + '"></div').css({ 
      'width': defaultSettings.tableSize.tableW + '%', 
      'height': defaultSettings.tableSize.tableH + '%', 
      'background-color': 'black' 
     }); 
     tableProp = { 
      'left': defaultSettings.tablePos.posX, 
      'top': defaultSettings.tablePos.posY, 
      'position': 'absolute', 
      'display': 'none' 
     }; 
      defaultSettings.tablePos.posX += 200; 
     newTable.css(tableProp).appendTo('body').fadeIn(defaultSettings.speed); 
     availableTables.push(newTable); 
    } 
    return availableTables; 
} 

我应该将椅子数组拆分成包含六个块的块，以便使用它们的类元素将每个数组聚类到一个表中。所以我做了前者。

我的问题是：如何使用Javascript/JQuery CSS将每个拆分数组定位在表格div周围？这应该是动态的，所以我不必为每个新表执行操作，但是我在这里问，因为我根本不知道如何操作。任何指针/帮助？

在这fiddle，有5张桌子和30把椅子。

Answer 1

我把桌子和椅子一起分组。标出可用的表格。

<button id="check">Check</button> 


    <script> 

     $(document).ready(function() { 
    makeFloorPlan(); 

    function makeFloorPlan() { 
     var defaultSettings = { 
       numberofTables: 5, //5 tables 
       tablePos: { 
         posX: 100, 
         posY: 100 
       }, 
       tableSize: { 
         tableW: 10, 
         tableH: 12 
       }, 
       takenTables: [2, 4], // 
       numberofChairs: 30, 
       chairPos: { 
         posX: 20, 
         posY: 80 
       }, 
       chairSize: { 
         chairW: 1, 
         chairH: 2 
       }, 
       speed: 1000 // tables fade in 
     }; 

     function createAvailTables() { 
    var availableTables = [], 
     newTable, tableProp; 
    for (var i = 0; i < defaultSettings.numberofTables; i++) { 
     newTable = $('<div id="table' + i + '"></div').css({ 
      'width': defaultSettings.tableSize.tableW + '%', 
      'height': defaultSettings.tableSize.tableH + '%', 
      'background-color': 'black' 
     }); 
     tableProp = { 
      'left': defaultSettings.tablePos.posX, 
      'top': defaultSettings.tablePos.posY, 
      'position': 'absolute', 
      'display': 'none' 
     }; 

        //create chairs for the table 

         var availableChairs = [], 
         newChair, chairProp; 
         var horPosArr = new Array(0, 50, 100); 
         var chairPosX, chairPosY; 
         for (var j = 0; j < 6; j++) {        

          if(j<3) { 
           chairPosX = defaultSettings.tablePos.posX + horPosArr[j]; 
           chairPosY = defaultSettings.tablePos.posY - 20; 
           //console.log("chair" + chairPosX + "," + chairPosY);          
          } 
          else { 
           chairPosX = defaultSettings.tablePos.posX + horPosArr[j-3]; 
           chairPosY = defaultSettings.tablePos.posY + 100; 
           //console.log("chair" + chairPosX + "," + chairPosY);          
          }         
           newChair = $('<div class="table' + i + 'chair' + j + '"></div').css({ 
             'width': defaultSettings.chairSize.chairW + '%', 
             'height': defaultSettings.chairSize.chairH + '%', 
             'background-color': 'green' 
           }); 
           chairProp = { 
             'left': chairPosX, 
             'top': chairPosY, 
             'position': 'absolute', 
             'display': 'none' 
           }; 

           newChair.css(chairProp).appendTo('body').fadeIn(defaultSettings.speed); 
           availableChairs.push(newChair); 
         } 


     if (defaultSettings.tablePos.posX >= 400) { 
      defaultSettings.tablePos.posX = 100; 
      defaultSettings.tablePos.posY += 200; 
     } else { 
      defaultSettings.tablePos.posX += 200; 
     }       

     newTable.css(tableProp).appendTo('body').fadeIn(defaultSettings.speed); 
     availableTables.push(newTable); 

    } 
      //console.log(availableTables); 
    return availableTables;     
     } 

     var availableTables = createAvailTables(); 

     $("#check").click(function() { 
       for (var i = 0; i < defaultSettings.takenTables.length; i++) { 
        console.log(defaultSettings.takenTables[i]); 
        $("#table"+defaultSettings.takenTables[i]).fadeTo(defaultSettings.speed, 0.33); 
       } 
     }); 


     }