如何在jQuery函数的append中使用循环

Question

i would like to append a new html code, buy clicking a button. however in the append there are a looping to show the html code.

<script>
var day_left = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
$(".add_schedule").click(function () {
                if ($('.day-part').is(':empty')){
                    alert("You have limit schedule time!")
                }else{
                    var stack = $(this).parent().find('#stack').val();
                    alert("form-schedule-"+stack);
                    $(this).before('<div class="form-schedule" id="form-schedule-'+stack+'">' +
                        '<div class="col-md-4">' +
                        '<label>Start Time</label><input type="time" placeholder="ex : 00:00" name="time['+stack+'][open_time]" class="open_time form-control" id="open_time'+stack+'">' +
                        '</div>' +
                        '<div class="col-md-4">' +
                        '<label>End Time</label><input type="time" placeholder="ex : 21:00" name="time['+stack+'][close_time]" class="close_time form-control" id="close_time"></div>' +
                        '<div class="col-md-4">' +
                        '<label>Pilih Hari</label> ' +
                        '<div class="dropdown dropdown-payment">' +
                        '<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Select Date <span class="caret"></span></button> ' +
                        '<div class="dropdown-menu"><div class="everyday-part">' +
                        '<li> <label> ' +
                        '<input type="checkbox" id="everyday" class="everyday_check_box form form-control" name="time['+stack+'][everyday]" value="7"> Everyday </label>' +
                        '</li>' +
                        '</div>' +
                        '<div class="day-part">'+

       // The Problem is Started From Here
                        $.each(day_left,function (i,val) {
                            $('<li><label><input type="checkbox" checked="checked" id="date_check_box" class="form form-control" name="time[' + stack + '][date][]" value="' + i + '">'+val+'</label> </li>');
                        })+'</div> </div> </div> </div></div><div class="clearfix"></div><br> ');


       // End Of the Problem

                    stack = parseInt(stack)+1;



                    $(this).parent().find('#stack').val(stack);

                }


            });
</script>

actually i could append the html. But there is a bug in my $.each(day_left,function(i,val)){});

its only return the value of day_left which they are like sunday,monday,... . The code doesn't show the html code

My expected is it would be returned like this

but my code is only return :

Answer 1

Please make a function like this

 function makeString(day_left,stack){
              var str = '';
              for(var i = 0; i <= day_left.length ; i++ ){
                str += '<li><label><input type="checkbox" checked="checked" id="date_check_box" class="form form-control" name="time[' + stack + '][date][]" value="' + i + '">'+day_left[i]+'</label> </li>';
              }
              return str;
            }

and change as following

$(this).before('<div class="form-schedule" id="form-schedule-'+stack+'">' +
                    '<div class="col-md-4">' +
                    '<label>Start Time</label><input type="time" placeholder="ex : 00:00" name="time['+stack+'][open_time]" class="open_time form-control" id="open_time'+stack+'">' +
                    '</div>' +
                    '<div class="col-md-4">' +
                    '<label>End Time</label><input type="time" placeholder="ex : 21:00" name="time['+stack+'][close_time]" class="close_time form-control" id="close_time"></div>' +
                    '<div class="col-md-4">' +
                    '<label>Pilih Hari</label> ' +
                    '<div class="dropdown dropdown-payment">' +
                    '<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Select Date <span class="caret"></span></button> ' +
                    '<div class="dropdown-menu"><div class="everyday-part">' +
                    '<li> <label> ' +
                    '<input type="checkbox" id="everyday" class="everyday_check_box form form-control" name="time['+stack+'][everyday]" value="7"> Everyday </label>' +
                    '</li>' +
                    '</div>' +
                    '<div class="day-part">'+

   // The Problem is Started From Here
                   makeString(day_left,stack)+'</div> </div> </div> </div></div><div class="clearfix"></div><br> ');

plnkr https://plnkr.co/edit/aBLj49Yv2g4EakeKjlqI?p=preview

Answer 2

you can do like that...... just use return function or make you iteration returnable.

 <script>
var day_left = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
$(".add_schedule").click(function () {
                if ($('.day-part').is(':empty')){
                    alert("You have limit schedule time!")
                }else{
                    var stack = $(this).parent().find('#stack').val();
                    alert("form-schedule-"+stack);
                    $(this).before('<div class="form-schedule" id="form-schedule-'+stack+'">' +
                        '<div class="col-md-4">' +
                        '<label>Start Time</label><input type="time" placeholder="ex : 00:00" name="time['+stack+'][open_time]" class="open_time form-control" id="open_time'+stack+'">' +
                        '</div>' +
                        '<div class="col-md-4">' +
                        '<label>End Time</label><input type="time" placeholder="ex : 21:00" name="time['+stack+'][close_time]" class="close_time form-control" id="close_time"></div>' +
                        '<div class="col-md-4">' +
                        '<label>Pilih Hari</label> ' +
                        '<div class="dropdown dropdown-payment">' +
                        '<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Select Date <span class="caret"></span></button> ' +
                        '<div class="dropdown-menu"><div class="everyday-part">' +
                        '<li> <label> ' +
                        '<input type="checkbox" id="everyday" class="everyday_check_box form form-control" name="time['+stack+'][everyday]" value="7"> Everyday </label>' +
                        '</li>' +
                        '</div>' +
                        '<div class="day-part">'+

       // The Problem is Solved
            function(){var s='';
        $.each(day_left,function (i,val) {
                            s += '<li><label><input type="checkbox" checked="checked" id="date_check_box" class="form form-control" name="time[' + stack + '][date][]" value="' + i + '">'+val+'</label> </li>';
                        });
               return s;}
+'</div> </div> </div> </div></div><div class="clearfix"></div><br> ');


       // End Of the Problem

                    stack = parseInt(stack)+1;



                    $(this).parent().find('#stack').val(stack);

                }


            });
</script>