使用循环在javascript中构建多维对象

因此，我有一个html布局，其中有块（没有固定数量的块，因为它们可以动态创建）

在这些块中有框（同样，它们可以动态创建） 框包含*html元素*s，并且还具有不同的数据属性

所以我需要创建一个像这样的对象

    block1 = {
       box1 : {
          id : box1.data('id'),
          content : box1.html()
       },
       box2 : {
          id : box2.data('id'),
          content : box2.html()
       } 
     },
     block2 = {
       box3 : {
          id : box3.data('id'),
          content : box3.html()
       }           
     }

我知道，请不要说语法不正确。我只是想说明我想要什么

所以我的问题是如何在jQuery的帮助下做到这一点

---

感谢您在advanced

中选择所有块和框，并使用以下方法对它们进行迭代：

不过，您可能不需要对象的对象，可能数组就足够了，甚至更好，这取决于您打算对数据做什么

---

要了解有关对象如何工作的更多信息，请查看。

您可以选择所有块和框，并使用以下命令对它们进行迭代：

不过，您可能不需要对象的对象，可能数组就足够了，甚至更好，这取决于您打算对数据做什么

---

要了解更多有关对象如何工作的信息，请查看。

您应该查看Knockout.js，它非常适合构建像您这样的应用程序

详细说明：使用对象。为自己构建一个数组，包含具有块名称和所有子节点的对象

<div id="lanesContainer" data-bind="foreach: blocks">
    <div id="" class="dropLane laneDefault ui-widget-header ui-dialog ui-widget ui-corner-all ui-front ui-resizable">
      <div class="ui-dialog-titlebar ui-helper-clearfix" data-bind="drop: {value: $data.dropTask}">
        <p class="laneheader" data-bind="text: $data.title">Lane</p>                  
      </div>

      <ul data-bind="foreach: box">
        <li class="ui-dialog-content laneItem" data-bind="drag: {value: $data}">
            <div class="ui-widget-header laneItemHeader" data-bind="text: $data.Title"></div>
            <div class="ui-widget-content laneItemBody" data-bind="text: $data.Description"></div>
            <div class="ui-widget-content laneItemFooter">
                <div class="ui-corner-all ui-state-default notification-important">
                    <span class="ui-icon ui-icon-notice" title="sometitle" data-bind="css: {'notification-important-hide': !$root.isElementImportant($data) }"></span>
                </div>
            </div>
        </li>
      </ul>
    </div>
</div>

---

您应该看看Knockout.js，它非常适合构建像您这样的应用程序

详细说明：使用对象。为自己构建一个数组，包含具有块名称和所有子节点的对象

<div id="lanesContainer" data-bind="foreach: blocks">
    <div id="" class="dropLane laneDefault ui-widget-header ui-dialog ui-widget ui-corner-all ui-front ui-resizable">
      <div class="ui-dialog-titlebar ui-helper-clearfix" data-bind="drop: {value: $data.dropTask}">
        <p class="laneheader" data-bind="text: $data.title">Lane</p>                  
      </div>

      <ul data-bind="foreach: box">
        <li class="ui-dialog-content laneItem" data-bind="drag: {value: $data}">
            <div class="ui-widget-header laneItemHeader" data-bind="text: $data.Title"></div>
            <div class="ui-widget-content laneItemBody" data-bind="text: $data.Description"></div>
            <div class="ui-widget-content laneItemFooter">
                <div class="ui-corner-all ui-state-default notification-important">
                    <span class="ui-icon ui-icon-notice" title="sometitle" data-bind="css: {'notification-important-hide': !$root.isElementImportant($data) }"></span>
                </div>
            </div>
        </li>
      </ul>
    </div>
</div>

这里有一个想法：

1-使用一些CSS选择器迭代所有块

2-创建一个通用JS对象，并将名为“box”的集合属性设置为数组

3-对于每一个，再次使用CSS选择器遍历其中的所有框

4-为每个框创建一个通用JS对象，并根据需要设置属性

代码版本 我认为类似的方法会起作用（未经测试）：

这里有一个想法：

1-使用一些CSS选择器迭代所有块

2-创建一个通用JS对象，并将名为“box”的集合属性设置为数组

3-对于每一个，再次使用CSS选择器遍历其中的所有框

4-为每个框创建一个通用JS对象，并根据需要设置属性

代码版本 我认为类似的方法会起作用（未经测试）：

---

我不完全确定您的问题是什么，但如果您想动态创建块和框，我建议您首先使用数组

//All dynamically created blocks
blocks = [];

//Create blocks
for(var i = 1; i < 3; i++) {
    var block = {
        //All dynamically generated bloxes
        boxes = [];
    };

    //Create boxes
    for(var j = 1; j < 4; j++) {
        block.box[j] = {
          id : j,
          content : '<span>html for box' + j + '</span>'
       }
    }

    blocks[i] = block;
}

//所有动态创建的块
区块=[]；
//创建块
对于（变量i=1；i<3；i++）{
变量块={
//所有动态生成的blox
框=[]；
};
//创建框
对于（var j=1；j<4；j++）{
block.box[j]={
id:j，
内容：“框'+j+''的html”
}
}
块[i]=块；
}

我不完全确定您的问题是什么，但如果您想动态创建块和框，我建议您首先使用数组

//All dynamically created blocks
blocks = [];

//Create blocks
for(var i = 1; i < 3; i++) {
    var block = {
        //All dynamically generated bloxes
        boxes = [];
    };

    //Create boxes
    for(var j = 1; j < 4; j++) {
        block.box[j] = {
          id : j,
          content : '<span>html for box' + j + '</span>'
       }
    }

    blocks[i] = block;
}

//所有动态创建的块
区块=[]；
//创建块
对于（变量i=1；i<3；i++）{
变量块={
//所有动态生成的blox
框=[]；
};
//创建框
对于（var j=1；j<4；j++）{
block.box[j]={
id:j，
内容：“框'+j+''的html”
}
}
块[i]=块；
}

您是在尝试创建HTML，还是从已经存在的HTML创建JavaScript对象，还是从这些JavaScript对象创建HTML？我不太清楚你在问什么。@EricGalluzzo我正在尝试从HTML创建JavaScript对象你是在尝试创建HTML，还是从已经存在的HTML创建JavaScript对象，还是从这些JavaScript对象创建HTML？我不太清楚你在问什么。@EricGalluzzo我正试图从HTMLTank you@Felix Kling创建JavaScript对象我会测试它知道，但它看起来像我想要的谢谢你@Felix Kling我会测试它知道，但它看起来像我想要的

//All dynamically created blocks
blocks = [];

//Create blocks
for(var i = 1; i < 3; i++) {
    var block = {
        //All dynamically generated bloxes
        boxes = [];
    };

    //Create boxes
    for(var j = 1; j < 4; j++) {
        block.box[j] = {
          id : j,
          content : '<span>html for box' + j + '</span>'
       }
    }

    blocks[i] = block;
}