CODEWITHSUNDEEP
jquery
user663724
user663724

Reputation:

Why only the First Element is being added to the div

I am trying to create the following HTML dynamically as shown in this fiddle

I was trying it this way. When I click on the Add To swiper-wrapper Button , could anybody please let me know why only the first element is being added in this case ??

<div class="swiper-wrapper"></div>
<input type="button" id="addtoswipperwrapper" value="Add To swiper-wrapper" />

$(document).on("click", "#addtoswipperwrapper", function () {
    var treemenudiv = $('<div class="TreeMenu" data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a"></div>');
    var h3tagdata = '';
    var searchResponse = ["T1", "T2", "T3"]
    for (var i = 0; i < searchResponse.length; i++) {
        h3tagdata += '<h3>' + searchResponse[i] + '</h3>';
    }
    treemenudiv.append(h3tagdata);
    $('.swiper-wrapper').append(treemenudiv).trigger("create");;
});

Upvotes: 0

Views: 47

Answers (1)

Suhaib Janjua
Suhaib Janjua

Reputation: 3574

You need to place everything inside your loop. You don't need to increment the value of h3tagdata. secondly place the treemendiv inside you it will be generated and appending exact number of times as loop executes.

EDIT:

Updated Demo JSFiddle.

If you want to append the content only once, then you can use any way to execute the code only one. Jquery .one() is the best to use as its executes only once.

$("#addtoswipperwrapper").one("click", function () {
    var h3tagdata = '';

    var searchResponse = ["T1", "T2", "T3"];


    for (var i = 0; i < searchResponse.length; i++) {
        var treemenudiv = $('<div class="TreeMenu" data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a"></div>');
        h3tagdata = '<h3>' + searchResponse[i] + '</h3>';
        treemenudiv.append(h3tagdata);
        $('.swiper-wrapper').append(treemenudiv).trigger("create");
    }
});

Working Demo JSFiddle.

$(document).on("click", "#addtoswipperwrapper", function () {

   var h3tagdata = '';

    var searchResponse = ["T1", "T2", "T3"]
    for (var i = 0; i < searchResponse.length; i++) {
           var treemenudiv = $('<div class="TreeMenu" data-role="collapsible" data-collapsed="true" data-theme="a" data-content-theme="a"></div>');
        h3tagdata = '<h3>' + searchResponse[i] + '</h3>';
        console.log(h3tagdata);
        treemenudiv.append(h3tagdata);
        console.log(treemenudiv);
        $('.swiper-wrapper').append(treemenudiv).trigger("create");
    }

});

Upvotes: 1

Related Questions