Question

我正在使用此代码使用JSON生成一个Bootstrap面板，它运行正常。但现在我需要在此面板后显示页脚。但是此功能后页脚没有加载。这个jQuery函数不仅仅是页脚，其他HTML内容也没有显示。为什么以及如何解决它？

var valMS = [
  {
    "Subject": "Test",
    "Message": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
    "Date": "12-03-17"
  },
  {
    "Subject": "Test",
    "Message": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
    "Date": "12-03-17"
  },
  {
    "Subject": "Test",
    "Message": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
    "Date": "12-03-17"
  },
  {
    "Subject": "Test",
    "Message": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
    "Date": "12-03-17"
  }
];

 $(document).ready(function () { 
  html = '<div class="container" >';
   // var flag = 0;

    $.each(valMS, function(index, v){
        html += '<div id="events" class="container"><div class="row">';
        html += '<div class="panel panel-primary"  style="width: 20%;" >';
        html += '<div class="panel-heading">'+v["Subject"]+'</div>';
        html += '<div class="panel-body">'+v["Message"]+'</div>';
        html += '<div class="panel-footer">'+v["Date"]+'</div>';
        html += '</div>';
        html += '</div></div>';
     });

     $('body').append(html);
     //$( ".container" ).after( $( "<p>Test</p>" ) );
});

</script>

Answer 1

您正在关闭循环中的<div>！试试这个：

html = '<div class="container" >';
$.each(valMS, function(index, v){
    html += '<div id="events" class="container"><div class="row">';
    html += '  <div class="panel panel-primary"  style="width: 20%;" >';
    html += '    <div class="panel-heading">'+v["Subject"]+'</div>';
    html += '    <div class="panel-body">'+v["Message"]+'</div>';
    html += '    <div class="panel-footer">'+v["Date"]+'</div>';
    html += '  </div>';
    html += '</div>';
 });
html += '</div>';
$('body').append(html);

Answer 2

好的，这样吗？只是使用id

 <!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <title>test</title>

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


<style>

</style>

</head>

<body>








<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<script>

var valMS = [
  {
    "Subject": "Test",
    "Message": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
    "Date": "12-03-17"
  },
  {
    "Subject": "Test",
    "Message": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
    "Date": "12-03-17"
  },
  {
    "Subject": "Test",
    "Message": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
    "Date": "12-03-17"
  },
  {
    "Subject": "Test",
    "Message": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
    "Date": "12-03-17"
  }
];

 $(document).ready(function () { 
  html = '<div class="container" id="mypanel">';
   // var flag = 0;

    $.each(valMS, function(index, v){
        html += '<div id="events" class="container"><div class="row">';
        html += '<div class="panel panel-primary"  style="width: 20%;" >';
        html += '<div class="panel-heading">'+v["Subject"]+'</div>';
        html += '<div class="panel-body">'+v["Message"]+'</div>';
        html += '<div class="panel-footer">'+v["Date"]+'</div>';
        html += '</div>';
        html += '</div></div>';
     });

     $('body').append(html);
     $( "#mypanel" ).after( $( '<div class="footer"><div class="container"<p>This is a footer</p></div></div>' ) );
});

</script>



</body>

</html>

页脚在Jquery函数后没有显示

2 个答案: