JQuery OnClickを使用して複数のHTML要素を作成

Question

作成しているredditページには3つのタブがあります。私が書いたxTcount

Redditの機能が移入されますまで、特定のクラスとSがループで作成されます

1. <div>」：私は、私は次のことがONLYそれぞれのタブで発生したいタブのいずれかをクリックするとそれらの<div>の内容と

私は<div>構造体がOnClickを作成するのに問題があります。ここで私のHTML構造を（私はx個の同一のものが欲しい）のように見せたいです。

  <div class="newsContainer"> 
       <div class="redditThumbnail clearfix floatleft"></div> 
       <div class="articleHeader read clearfix"> 
        <div class="actionmenuHeader"> 
         <div class="userNameContainer"></div> 
         <div class="redditFlair"></div> 
         <div class="subRedditName"></div> 
         <div class="redditDate"></div> 
         <div class="redditScore"> 
          <i class="redditUpvote material-icons"> 
           keyboard_arrow_up 
          </i> 
         </div> 
        </div> 
        <p class="redditTitle clearfix mediaTitle news"></p> 
        <div class="redditPost mediumtext"></div> 
       </div> 
      </div> 

ここに、別の要素のOnClickを実行するJQueryスクリプトがあります。

var divPerPage = 10; 
    for(var i = 0; i < divPerPage; i++) { 

     $("<div class='listrow news nomargin'></div>").appendTo("#redditCardBox1"); 
     $("<div class='newsContainer'></div>").appendTo(".listrow"); 
     $("<div class='redditThumbnail clearfix'></div>").appendTo(".newsContainer"); 
     $("<div class='articleHeader read clearfix'></div>").appendTo(".newsContainer"); 
     $("<div class='actionmenuHeader'></div>").appendTo(".articleHeader"); 
     $("<div class='userNameContainer'></div>").appendTo(".actionmenuHeader"); 
     $("<div class='redditFlair'></div>").appendTo(".actionmenuHeader"); 
     $("<div class='subRedditName'></div>").appendTo(".actionmenuHeader"); 
     $("<div class='redditDate'></div>").appendTo(".actionmenuHeader"); 
     $("<div class='redditScore'></div>").appendTo(".actionmenuHeader"); 
     $("<i class='redditUpvote material-icons'>keyboard_arrow_up</i>").appendTo(".redditScore"); 
     $("<p class='redditTitle clearfix mediaTitle news'></p>").appendTo(".articleHeader"); 
     $("<div class='redditPost mediumtext'></div>").appendTo(".articleHeader"); 

    } 

原発問題：

1. 個々divが代わりに一度、その後、10倍以上を開始DIVそれぞれを作成する10回作成されています。

ご協力いただきましてありがとうございます。いつものように。

Answer 1

あなたの問題はappendTo()です。これらの呼び出しは、それらのクラスのすべてのインスタンスを見つけて、それぞれのクラスに追加します。あなたはこのように、コピーされた後、コンテナに追加されるだけで全体の要素をクローニングすることにより、大幅にこれを簡素化することができます。

var divPerPage = 10; 
for (var i = 0; i < divPerPage; i++) { 
    $(".listrow").eq(0).clone().appendTo("#redditCardBox1"); 
} 

何らかの理由であなたはそれを行うことはできませんし、個別の要素を追加する必要がある場合新しい行のクラスのインスタンスに追加するだけでどのように追加するのかを見直してください。このような

何か：

var divPerPage = 10; 
for (var i = 0; i < divPerPage; i++) { 
    var row = $("<div class='listrow news nomargin'></div>").appendTo("#redditCardBox1"); 
    $("<div class='newsContainer'></div>").appendTo(row.find(".listrow")); 
    $("<div class='redditThumbnail clearfix'></div>").appendTo(row.find(".newsContainer")); 
    $("<div class='articleHeader read clearfix'></div>").appendTo(row.find(".newsContainer")); 
    $("<div class='actionmenuHeader'></div>").appendTo(row.find(".articleHeader")); 
    $("<div class='userNameContainer'></div>").appendTo(row.find(".actionmenuHeader")); 
    $("<div class='redditFlair'></div>").appendTo(row.find(".actionmenuHeader")); 
    $("<div class='subRedditName'></div>").appendTo(".actionmenuHeader")); 
    $("<div class='redditDate'></div>").appendTo(row.find(".actionmenuHeader")); 
    $("<div class='redditScore'></div>").appendTo(row.find(".actionmenuHeader")); 
    $("<i class='redditUpvote material-icons'>keyboard_arrow_up</i>").appendTo(row.find(".redditScore")); 
    $("<p class='redditTitle clearfix mediaTitle news'></p>").appendTo(row.find(".articleHeader")); 
    $("<div class='redditPost mediumtext'></div>").appendTo(row.find(".articleHeader")); 
} 

Answer 2

私は、ノードのクローンを作成するDaveのアプローチ@使用すると思います。最初の行の

（すでにすでにHTMLでそれを持っていないと仮定すると）にもかかわらず、私はすべて1つの文字列にHTMLを追加したい：

$('#redditCardBox1').append('<div class='listrow news nomargin'><div class="newsContainer"><div class="redditThumbnail clearfix floatleft"></div><div class="articleHeader read clearfix"><div class="actionmenuHeader"><div class="userNameContainer"></div><div class="redditFlair"></div><div class="subRedditName"></div><div class="redditDate"></div><div class="redditScore"><i class="redditUpvote material-icons">keyboard_arrow_up</i></div></div><p class="redditTitle clearfix mediaTitle news"></p><div class="redditPost mediumtext"></div></div></div></div>'); 

私はあなたを考えていませんそんなに壊す必要がある。