1

我正在为从请求<section class="slide-item" data-id="slide-1">返回的每组（子）项目创建一个（父）元素。jsonp每个组都是数组中的一个对象：

array[ object, object, object ]

每个对象都包含名称、id 等属性，最重要的<img />是我附加到相应的元素的嵌套数组<section>— DOM 看起来像这样

   <section class="slide-item" data-id="slide-1">
       <img src="http://lh5.ggpht.com/ySlk_p3UhTdXWyKXv=s1200" /> 
       <img src="http://lh5.ggpht.com/ySlk_p3UhTdXWyKXv=s1200" />
       <img src="http://lh5.ggpht.com/ySlk_p3UhTdXWyKXv=s1200" />
   </section>

理想情况下，我想做的是使用一个函数创建/添加 DOM，然后使用另一个函数来处理添加宽度、高度和任何其他相关的大小/布局信息。

我知道我可以通过这种方式实现它：

      module.draft = function () {

        _.each( GROUP, function( id ) {

            BUILD.push( '<section class="slide-item" style="width:' + widthVar + ';"></section>' );

        });

        parentElement.append( BUILD.join( '' ) );

        }

然而，

我想等到加载DOM，然后应用宽度高度：

      module.draft = function () {

        _.each( GROUP, function( id ) {

            BUILD.push( '<section class="slide-item"></section>' );

        });

        parentElement.append( BUILD.join( '' ) );

        };

 module.architect = function () { <--- Doesn't work

   parentElement
      .find( '.slide-item' )
      .width( widthVar )
      .height( heightVar );

   // # Other sizing stuff

   };

编辑

更多信息：GROUP是我在问题开头提到的初始对象数组：array[ object, object, object ]， BUILD是一个空数组。

我正在调用这样的函数：

  module.init = function() {
        module.draft();
        module.architect();
    }

接着$( document ).on( 'ready', _app.init );

另外，我知道我可以使用它，$( window ).on( 'load', _app.init );但是它并不理想。

4

1 回答 1

0

我已经在 J​​sFiddle 中尝试过，我认为以下解决方案可以满足您的需求：

http://jsfiddle.net/99Pnu/12/

解释

首先，我声明要使用的变量：

/* vars */
GROUP = [
    {id: 1, img: '<img src="http://testimage1.png" />'},
    {id: 2, img: '<img src="http://testimage2.png" />'},
    {id: 3, img: '<img src="http://testimage3.png" />'}
];
BUILD = [];
module = {};

widthVar = 200;
heightVar = 250;

我也有 init 函数和“draft”和“architect”函数

/* init */
module.init = function() {
    $parentElement = $("body");
    module.draft();
    module.architect();
}

/* functions */
module.draft = function () {
    _.each( GROUP, function( id ) {
        BUILD.push( '<section class="slide-item"></section>' );
    });
    $parentElement.append( BUILD.join( '' ) );
};

module.architect = function () {
    $parentElement
      .find( '.slide-item' )
      .width( widthVar )
      .height( heightVar );
    // # Other sizing stuff
};

最后，我们在底部有“准备就绪”声明：

$( document ).on( 'ready', module.init );

这能解决你的问题吗？

我一直在调试，它似乎工作。Draft 函数创建“section”DOM 元素，architect 函数设置它们的宽度和高度。

我希望这可以帮助你。问候，罗曼。

于 2013-05-08T07:41:44.773 回答