使用JavaScript重复HTML元素

Question

我希望能在我的 for 循环 中重复使用 Bootstrap 的面板元素，并在面板标题中显示我的变量 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("[e-mail]:"));
      },
      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>');
          }
      },
  });
}

- xenurs

---

.panel-title 已经是一个 h3 标签了，你为什么还要在其内部添加 h3 标签？ - Bhojendra Rauniyar

只是为了确保你是正确的，这并不是强制性的 :) - xenurs

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

Fiddle here

- Yuri

Answer 2

嗨，如果您想根据数据长度重复您的面板div，您可以首先克隆您想要的面板对象（div标签+内部文本+标题等），并将其附加到第一个面板的父级。这样，您就可以使用jQuery保存附加HTML而不是使用字符串。

或者，如果您想在每个面板中使用特定的数据，则可以选择使用字符串附加。

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

您还可以插入要在面板中显示的数据。

- damitj07

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

- Jatin Bhole

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更改为您的选项卡父列表

- madalinivascu