javascript - 使用 for 循环通过 javaScript 添加嵌套元素

Question

JAVASCRIPT

var $tables = $('#generate-here');          
for (var i = 1; i <= 11; i++) {
    var $folder = $('#folder_'+i);
    $('<div />', { id: 'folder_'+i, class: 'grid_4'}).appendTo($tables);
    $('<a />', { href: 'images/full'+i+'.jpg', class: gal_item'}).appendTo($folder);
};

HTML

<div id="generate-here">
    <div class="grid_4">
        <a href="images/full3.jpg" class="gal_item">
            <img src="images/page2_img3.jpg" alt="">
            <div class="gal_caption">
                <time datetime="2014-01-01">01 Feb 16</time>
            </div>
            <span class="gal_magnify"></span>
        </a>
    </div>
</div>

我需要动态生成上面的 html DOM 结构，我尝试使用上面的代码，但它只是为 grid_4 div 生成代码，并且在元素未获得附加之后。

Answer 1

因为您需要将生成的 folder_ 分配给变量 $folder，在您的情况下，您尝试获取 id 为 folder_< 的已存在元素

var $tables = $('#generate-here'),
  $folder;
for (var i = 1; i <= 11; i++) {
  $folder = $('<div />', {
    id: 'folder_' + i,
    class: 'grid_4'
  }).appendTo($tables);
  $('<a />', {
    href: 'images/full' + i + '.jpg',
    class: 'gal_item'
  }).appendTo($folder);
};