Nested Element to add by javaScript using for loop

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>

i required above html DOM structure to be dynamically generated which i tried with above code but it is generating code just for grid_4 div and after the element not getting append.

Are you missing a quote before "gal_item" in the line where you add the <a> tag? — disatisfieddinosaur
– disatisfieddinosaur, Commented Dec 27, 2016 at 7:06
you are using #generate-here id before for-loop so inside it only you want set of <div class="grid_4">.....? — Tanmay
– Tanmay, Commented Dec 27, 2016 at 7:09
yes !! #generate-here id is given in html code inside that i want all this div dynamically depending for loop var i — Jainesh shah
– Jainesh shah, Commented Dec 27, 2016 at 7:12

Arun P Johny · Accepted Answer · 2016-12-27 07:10:57Z

1

Because you need to assign the generated folder_ to the variable $folder, in your case you are trying to fetch an already existing element with 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);
};

answered Dec 27, 2016 at 7:10

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jyoti Prakash · Accepted Answer · 2016-12-27 07:12:36Z

0

var $tables = $('#generate-here');          
for (var i = 1; i <= 11; i++) {

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

answered Dec 27, 2016 at 7:12

Jyoti Prakash

1,2609 silver badges9 bronze badges

Collectives™ on Stack Overflow

Nested Element to add by javaScript using for loop

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related