Jquery関数の後にフッタが表示されない

私はJSONを使用してブートストラップパネルを生成するためにこのコードを使用しています。しかし今、私はこのパネルの後にページフッターを表示する必要があります。しかし、この関数の後にフッターが読み込まれていません。フッターだけでなく、このjQuery関数の後に他のHTMLコンテンツも表示されません。なぜ、どのように私はそれを解決することができますか？ Jquery関数の後にフッタが表示されない

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>

出典

2017-04-10 Rooter

どのフッターですか？表示されているのはすべてjavascriptです。私たちは、ページに何が入っているのか、それともCSSが使われているのか分かりません。 [mcve] – charlietfl

を参照してください。あなたの 'js'で何かがエラーになりました..ブラウザコンソールを確認してください。 –

ブラウザコンソールを確認してください。 –

あなたは、ループ内で<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);

出典

2017-04-10 17:24:49 miken32

ありがとうございます。私の答えは私に助けてくれました。更新された質問を確認してください。テーブル生成関数のエラーは何ですか？その機能の後に私は同じ問題に直面した。フッターが表示されません。 – Rooter

回答が参考になった場合は、アップしてください。この質問に回答した場合は、それを受け入れてください。 *別の*の質問がある場合は、ホームページから[質問する]ボタンをクリックしてください。 – miken32

ok私はあなたが言った:)これは私の新しい質問です。私は質問するためにいくつかの制限があると思った。ごめんなさいhttp://stackoverflow.com/questions/43331403/page-content-not-showing-after-jquery-function – Rooter

大丈夫ですか？ 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>

出典

2017-04-10 18:54:45

Jquery関数の後にフッタが表示されない

答えて

関連する問題