0

だから私はブロックがあるhtmlレイアウトを持っています（動的に作成できるため、固定数はありません）。

これらのブロックにはボックスがあります(ここでも動的に作成できます)ボックスには *html 要素* が含まれており、異なるデータ属性も持っています

だから私はこのようなオブジェクトを作成する必要があります

    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 - Working with Objectをご覧ください。

于 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 に答える