Question

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

array[ object, object, object ]

每个对象都包含name，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 );来完成这项工作，但这并不理想。

Answer 1

我已经在JsFiddle中尝试过了，并且我认为以下解决方案可以满足您的需求：

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”和“架构”函数

/* 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 );

这会解决您的问题吗？

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

我希望这会对你有所帮助。此致，罗门。

添加动态元素，并在单独的函数中设置其宽度/高度

1 个答案: