wiederholen HTML-Element mit Javascript

Question

Ich möchte mein Panel-Element aus Bootstrap in meinem for loop wiederholen und meine Variable mysubject in meinem Panel-Titel anzeigen.

Zum Beispiel. wenn mein data.tickets.length == 4 ich sollte 4 Panel-Element haben und jedes Panel hat einen anderen Titel. Können Sie mir helfen, ich weiß nicht, wie ich mein Panel-Element wiederhole. Ich schaffe es gerade, den Titel so weit zu setzen.

Hier ist mein Code:

HTML

<div class="col-xs-3 panel panel-default"> 
    <div class="panel-heading"> 
    <h3 class="panel-title"></h3> 
    </div> 
    <div class="panel-body"> 
    Panel content 
    </div> 
</div> 

JS

function displaytickets(){ 
    var y = document.getElementById("mySecond").value; 

    $.ajax({ 
     url: "https://cubber.zendesk.com/api/v2/users/"+y+"/tickets/requested.json", 
     type: 'GET', 
     dataType: 'json', 
     contentType:'application/json', 
     secure: true, 
     beforeSend: function (xhr) { 
      xhr.setRequestHeader("Authorization", "Basic " + btoa("claire.pagniez@cubber.com:")); 
     }, 
     success: function (data) { 
      console.log(data.tickets.length); 
      for (i = 0; i < data.tickets.length; i++) { 
       console.log(data.tickets[i]); 

       console.log(data.tickets[i].description); 
       console.log(data.tickets[i].status); 
       console.log(data.tickets[i].subject); 
       var mysubject = data.tickets[i].subject; 

       $(".panel-title").append('<h3>'+mysubject+'</h3>'); 
      } 
     }, 
    }); 
} 

Answer 1

können Sie verwenden .clone(), und Sie können Ihre Platte direkt von jQuery wie folgt erstellen:

var $panel = $('<div/>').addClass('col-xs-3 panel panel-default'); 
$panel.append($('<div><h3 class="panel-title">Title</h3></div>').addClass('panel-heading')); 
$panel.append($('<div>Panel content</div>').addClass('panel-body')); 
$('body').append($panel); 

oder Sie können clone() und bestehende Element wie folgt:

var $panel = $('#my-panel').clone(); 

und dann klonen Sie es erneut, um jedes neue Panel zu erhalten. In Ihrem Schnipsel() -Aufruf:

for (i = 0; i < data.tickets.length; i++) { 
    var new_panel = $panel.clone(); // note the use of .clone() 
    new_panel.find('.panel-title').text(data.tickets[i].subject); 
    new_panel.find('.panel-body').text(data.tickets[i].description); 
    $('body').append(new_panel); 
} 

Fiddle here

Answer 2

Hallo Ihr Panel div wiederholen je nach Länge der Daten zunächst die Platte klonen Objekt (div-Tags + innerer Text + Kopfzeilen usw.), die Sie möchten, und hängen Sie es an das übergeordnete Element des ersten an Panel. Auf diese Weise können Sie das Anhängen von HTML mit Strings in jquery speichern.

Oder wenn Sie Daten in jedem Panel für Sie verwenden möchten, können Sie mit String-Anhängen gehen.

success: function(data) { 
    var tickets = data.tickets; 
    for (var i = 0; i < tickets.length; i++) { 
     var panelBody = ""; 
     panelBody += "<div class=\"col-xs-3 panel panel-default\">"; 
     panelBody += " <div class=\"panel-heading\">"; 
     panelBody += " <h3 class=\"panel-title\">" + tickets[i].subejct + "<\/h3>"; 
     panelBody += " <\/div>"; 
     panelBody += " <div class=\"panel-body\">"; 
     panelBody += " Panel content"; 
     panelBody += tickets[i].status; 
     panelBody += tickets[i].description; 
     panelBody += " <\/div>"; 
     panelBody += "<\/div>"; 
     $('.panel-default').parent().append(panelBody); 
    } 
} 

Sie können auch die Daten einfügen, die im Panel angezeigt werden sollen.

Answer 3

versuchen

success: function(data) { 

    console.log(data.tickets.length); 
    for (i = 0; i < data.tickets.length; i++) { 

     $(".panel-default").parent().append('<div class="panel-heading"><h3 class="panel-title">' + 
      data.tickets[i].subject + '</h3></div><div class="panel-body">' + 
      data.tickets[i].description + '</div>'); 
    } 
} 

Answer 4

Versuchen:

success: function (data){ 
       $.each(data.tickets,function(i,v) { 
       $('body').append('<div class="col-xs-3 panel panel-default"><div class="panel-heading"><h3 class="panel-title">'+v.subject+'</h3></div><div class="panel-body">Panel content</div></div'); 
       }); 
    } 

Anmerkung: Änderung body auf Ihre Mutter Liste der Registerkarten