Javascript Jquery函数后不显示页脚_Javascript_Jquery_Html_Twitter Bootstrap

Javascript Jquery函数后不显示页脚

javascript jquery html twitter-bootstrap

Javascript Jquery函数后不显示页脚,javascript,jquery,html,twitter-bootstrap,Javascript,Jquery,Html,Twitter Bootstrap,我使用这段代码使用JSON生成一个引导面板，它工作正常。但是现在我需要在这个面板后面显示一个页脚。但此函数之后不会加载页脚。不仅页脚，其他HTML内容也不会在此jQuery函数之后显示。为什么以及如何解决它？ var valMS=[ { “主题”：“测试”， “信息”：“Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。”， “日期”：“2017年3月12日”

我使用这段代码使用

JSON

生成一个引导面板，它工作正常。但是现在我需要在这个面板后面显示一个页脚。但此函数之后不会加载页脚。不仅页脚，其他HTML内容也不会在此jQuery函数之后显示。为什么以及如何解决它？

var valMS=[
{
“主题”：“测试”，
“信息”：“Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。”，
“日期”：“2017年3月12日”
},
{
“主题”：“测试”，
“信息”：“Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。”，
“日期”：“2017年3月12日”
},
{
“主题”：“测试”，
“信息”：“Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。”，
“日期”：“2017年3月12日”
},
{
“主题”：“测试”，
“信息”：“Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。”，
“日期”：“2017年3月12日”
}
];
$（文档）.ready（函数（）{
html=''；
//var标志=0；
$。每个（值，函数（索引，v）{
html+=''；
html+=''；
html+=''+v[“主题”]+''；
html+=''+v[“消息”]+''；
html+=''+v[“日期”]+''；
html+=''；
html+=''；
});
$（'body'）.append（html）；
//$（“.container”）。之后（$（“测试””）；
});

您正在关闭循环中的

！请尝试以下方法：

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

html=”；
$。每个（值，函数（索引，v）{
html+=''；
html+=''；
html+=''+v[“主题”]+''；
html+=''+v[“消息”]+''；
html+=''+v[“日期”]+''；
html+=''；
html+=''；
});
html+=''；
$（'body'）.append（html）；

好的，这边走？只是在用身份证

 <!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>


测试
var valMS=[
{
“主题”：“测试”，
“信息”：“Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。”，
“日期”：“2017年3月12日”
},
{
“主题”：“测试”，
“信息”：“Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。”，
“日期”：“2017年3月12日”
},
{
“主题”：“测试”，
“信息”：“Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。”，
“日期”：“2017年3月12日”
},
{
“主题”：“测试”，
“信息”：“Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是该行业的标准虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。”，
“日期”：“2017年3月12日”
}
];
$（文档）.ready（函数（）{
html=''；
//var标志=0；
$。每个（值，函数（索引，v）{
html+=''；
html+=''；
html+=''+v[“主题”]+''；
html+=''+v[“消息”]+''；
html+=''+v[“日期”]+''；
html+=''；
html+=''；
});
$（'body'）.append（html）；
美元（“#mypanel”）。在（$（'what footer？您显示的是javascript。我们不知道页面中有什么内容，也不知道使用了什么css。请查看您的js。检查您的浏览器控制台。检查您的浏览器控制台。@uom pgregorio请检查我更新的问题。我关闭div标记解决了第一个问题。但我也面临同样的问题表格生成时出现问题。请告诉我表格生成的错误是什么（更新的问题）谢谢。你的回答对我有帮助。请检查我更新的问题。表格生成函数的错误是什么。在该函数之后，我也面临同样的问题。页脚不显示。好的，我按照你说的做了：）这是我的新问题。我认为提问有一些限制。对不起
 <!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>