將生成的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); 
       } 
     }); 


     }