0

所以我有一个 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 的帮助下做到这一点？

谢谢先进

4

4 回答 4

2

.each 您可以选择所有块和框并使用[docs]遍历它们中的每一个：

var blocks = {};

$('.block').each(function(index) {
    var boxes = {};
    $(this).find('.box').each(function(index) {
        boxes['box' + index] = {
            id: $(this).data('id');
            content: $(this).html();
        };
    });
    blocks['block' + index] = boxes;
});

不过，您可能不需要对象的对象，也许数组数组就足够了，或者会更好，这取决于您打算如何处理数据。

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

于 2013-02-18T13:59:14.977 回答
1

这是一个想法：

1- 使用一些 CSS 选择器遍历所有块。

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

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

4-为每个盒子创建一个通用的JS对象并根据需要设置属性。

代码版本 我认为这样的东西会起作用（未经测试）：

var blocks = new Array();
$(".blocks").each(function(b) {
  var my_block = {boxes: new Array()};
  var $block = $(b);
  $(".box", $block).each(function(box) {
     var $box = $(box);
     my_block.boxes.push({id: $box.attr("id"), content: $box.html()});
  });
  blocks.push(my_block);
});
于 2013-02-18T14:00:03.943 回答
0

你应该看看 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>

这有用吗？

以下是如何获取具有嵌套子数组的对象：

function laneObject(title) {
    var obj = new Object();
    obj.title = title; //Identifier for Lane
    obj.childs = []; //Elements of Lane to display
    return obj;
}
于 2013-02-18T13:59:19.717 回答
0

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

//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;
}
于 2013-02-18T14:01:45.143 回答