jQuery：divsは必要ありませんが、これは必要ありません。

現在、私はダイナミックカードページを生成するプロジェクトに取り組んでいます。このページは特定のjson feed（ユーザー役割など）の入力に基づいています。jQuery：divsは必要ありませんが、これは必要ありません。

profile.json 

    { 
     "Messages": "card1", 
     "Activities": "card2", 
     "Agenda": "card3", 
     "Users": "card4", 
     "Charts": "card5" 
    }

次に、私はカードを作成するためにjQueryとKendo UIを使用しています。まず、json feedから情報を抽出する必要があります。ご覧のとおり、すべてのカードはdiv内に配置されます。そして、すべてのdivがカードのdivに追加されます、あなたが期待するとおり

One of the card (card7/index.html) 
<!DOCTYPE html> 

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

    <style> 
     html { 
      overflow: hidden; 
     } 

     a { 
      color: #428bca; 
      text-decoration: none; 
     } 

     #card7 { 
      width: 150px; 
      height: 150px; 
      position: relative; 
     } 

     .front { 
      padding: 10px; 
      text-align: center; 
      position: absolute; 
      width: 140px; 
      height: 140px; 
      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); 
      transition: 0.3s; 
      border-radius: 1px; 
      background-color: #f5f4f5; 
     } 

     .back { 
      font-size: smaller; 
      padding: 10px; 
      text-align: left; 
      position: absolute; 
      width: 140px; 
      height: 140px; 
      box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); 
      transition: 0.3s; 
      border-radius: 1px; 
      background-color: #f5f4f5; 
     } 

     .front:hover, .back:hover { 
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); 
      transition: 0.3s; 
      border-radius: 5px; 
     } 

     img { 
      border-radius: 5px 5px 0 0; 
     } 

     .badge:after { 
      content: "1"; 
      position: absolute; 
      background: rgba(255, 0, 0, 0.85); 
      height: 2rem; 
      top: 1rem; 
      right: 2rem; 
      width: 2rem; 
      text-align: center; 
      line-height: 2rem; 
      font-size: 1rem; 
      border-radius: 50%; 
      color: white; 
     } 

     .seeBack { 
      margin-top: -30px; 
      margin-right: -10px; 
      float: right; 
      border-style: solid; 
      border-width: 0 0 40px 40px; 
      border-color: transparent; 
     } 

     .seeBack:hover { 
      border-color: transparent transparent #428bca transparent; 
      transition: 0.5s; 
     } 

     .seeFront { 
      margin-top: 10px; 
      margin-left: -10px; 
      float: left; 
      border-style: solid; 
      border-width: 40px 0 0 40px; 
      border-color: transparent; 

     } 

     .seeFront:hover { 
      border-color: transparent transparent transparent #428bca; 
     } 
    </style> 

</head> 
<body> 

    <div id="card7"> 
     <div class="front"> 
      <i class="fa fa-undo fa-5x"></i> 
      <h4><b>Tijdlijn</b></h4> 
      <div class="seeBack"></div> 
     </div> 
     <div class="back"> 
      <p><a href="#">Situatie vorige week</a></p> 
      <p><a href="#">Situatie vorige maand</a></p> 
      <p><a href="#">Situatie vorig jaar</a></p> 
      <div class="seeFront"></div> 
     </div> 
    </div> 

    <script> 
     $(document).ready(function() { 
      kendo.fx($("#card7")).flip("horizontal", $(".back"), $(".front")).play(); 
      var card = kendo.fx($("#card7")), 
       flip = card.flip("horizontal", $(".front"), $(".back")); 

      flip.duration(100); 

      $(".seeBack").click(function() { 
       flip.stop().play(); 
      }); 

      $(".seeFront").click(function() { 
       flip.stop().reverse(); 
      }); 

     }); 

    </script> 
</body> 
</html>

：

以下

はindex.htmlを

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <link rel="stylesheet" href="../../style/font-awesome.css"> 
    <link rel="stylesheet" href="/style/cards.css" /> 
    <script src="../lib/jquery.min.js"></script> 
    <script src="../lib/custom/effects.min.js"></script> 

</head> 
<body> 
    <div id="cards"></div> 

    <script> 
     $.getJSON("profile.json", function (data) { 
      $.each(data, function (key, val) { 
       var card = "<div id='" + val + "' height='180' width='175'></div>"; 
       $("#cards").append(card); 
       $('#' + val).load(val + '/index.html'); 
      }); 
     }); 
    </script> 

</body> 
</html>

のコードは、すべてのカードがいくつかの簡単なスタイリングを持っていないですプログラム自体が正しく動作しません。すべてのカードはindex.htmlの上に重ねて表示されますが、複数のdivに配置されます。私は問題が何であるか分からず、私はこれを解決できません。うまくいけば、私を助けることができる。