用javascript重復html元素

Question

我想在我的for loop從bootstrap重復我的panel元素，並在我的面板標題中顯示我的變量mysubject 。

例如。 如果我的data.tickets.length == 4我應該有4個面板元素，每個面板都有不同的標題。 你能幫助我嗎？我不知道如何重復我的面板元素。 到目前為止，我只是設置了標題。

這是我的代碼：

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

你可以使用.clone（），你可以直接從jQuery創建你的面板，如下所示：

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);

或者您可以clone()和現有元素，如下所示：

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

然后再次克隆它以獲得每個新面板。 在你的.ajax（）調用中：

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);
}

在這里小提琴

Answer 2

嗨，根據您可以首先克隆所需的面板對象（div標簽+內部文本+標頭等）的數據長度重復您的面板div，並將其附加到第一個面板的父級。 通過這種方式，您可以使用jquery中的字符串保存附加html。

或者，如果您想在特定於每個面板中使用數據，可以使用字符串appendign。

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);
    }
}

您還可以插入要在面板中顯示的數據。

Answer 3

嘗試

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

嘗試：

 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');
                });
    }

注意：將body更改為父級選項卡列表