многомерное построение объекта в javascript с использованием циклов

Question

Итак, у меня есть 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?

Спасибо расширенных

Answer 1

Вы можете выбрать все блоки и коробки и перебирать каждый из них с помощью .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 - Working with Object.

Answer 2

Вы должны взглянуть на 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; 
} 

Answer 3

Вот идея:

1- перебирать все блоки с помощью какого-то селектора CSS.

2- Создать общий объект JS и установить атрибут коллекции под названием «коробки», чтобы быть массивом

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); 
}); 

Answer 4

Я не совсем уверен, что ваш вопрос, но если вы хотите создать блоки и коробки динамически, Я предлагаю вам в первую очередь использовать массивы.

//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; 
}