jquery - repeat html element with javascript - Stack Overflow

admin管理员组

文章数量:1399969

i would like to repeat my panel element from bootstrap in my for loop and display my variable mysubject in my panel title.

For example. if my data.tickets.length == 4 i should have 4 panel element and every panel got a different title. Can you help me i don t know how to repeat my panel element. I just manage to set the title so far.

Here is my 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: "/"+y+"/tickets/requested.json",
      type: 'GET',
      dataType: 'json',
      contentType:'application/json',
      secure: true,
      beforeSend: function (xhr) {
          xhr.setRequestHeader("Authorization", "Basic " + btoa("[email protected]:"));
      },
      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>');
          }
      },
  });
}

i would like to repeat my panel element from bootstrap in my for loop and display my variable mysubject in my panel title.

For example. if my data.tickets.length == 4 i should have 4 panel element and every panel got a different title. Can you help me i don t know how to repeat my panel element. I just manage to set the title so far.

Here is my 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./api/v2/users/"+y+"/tickets/requested.json",
      type: 'GET',
      dataType: 'json',
      contentType:'application/json',
      secure: true,
      beforeSend: function (xhr) {
          xhr.setRequestHeader("Authorization", "Basic " + btoa("[email protected]:"));
      },
      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>');
          }
      },
  });
}

• javascript
• jquery
• html

Share Improve this question Follow edited Mar 24, 2016 at 11:38 Adnan Umer 3,68922 gold badges1919 silver badges3838 bronze badges asked Mar 24, 2016 at 10:49 xenursxenurs 44911 gold badge88 silver badges1919 bronze badges 2

• 1 .panel-title is already an h3 tag why are you appending h3 tag inside it? – Bhojendra Rauniyar Commented Mar 24, 2016 at 10:51
• Just to be sure you are right it is not mandatory :) – xenurs Commented Mar 24, 2016 at 10:51

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

You can use .clone(), and you can create your panel directly from jQuery like this:

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

or you can clone() and existing element like this:

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

and then clone it again to get each new panel. Inside your .ajax() call:

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

Hi to repeat your panel div depending on length of data you can first clone the panel object(div tags + inner text + headers etc) you want and append it to the parent of the first panel . In this way you can save appending the html using strings in jquery.

Or if you want to use data in each panel specific to you can go with string 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);
    }
}

You can also insert the data which you want to show in the panel.

try

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

Try:

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

note: change body to your parent list of tabs

本文标签： jqueryrepeat html element with javascriptStack Overflow