Anzeigen von Inhalt aus JavaScript mit AppendTo

Question

Ich benutze die Trello API zusammen mit Javascript/jquery, um eine zusammengefasste Ansicht einer Trello-Platine zu erstellen. Ich bin ziemlich neu in jquery und ich habe Probleme mit appendTo, um meine Seite richtig zu legen.

Unten ist der HTML-Code, den ich bekomme, sobald der Javascript-Inhalt zurückgegeben wird. Mein Ziel ist, dass die Tags <h3> und <p> in ihrem eigenen div sind (also ist jeder "List Title" in einem separaten div enthalten), aber stattdessen kann ich nur die <p> Tags im div finden, mit dem <h3> gerade draußen davon.

<div id="output"> 
    <div id="boards"> 
     <h3 class="board">List Title 1</h3> 
     <div> 
      <p class="card">Card 1 Name</p> 
      <p class="card">Card 2 Name</p> 
      ... 
     </div> 
     <h3 class="board">List Title 2</h3> 
     <div> 
      <p class="card">Card 1 Name</p> 
      ... 
     </div> 
    </div> 
</div> 

Dies ist mein Javascript. Der Basis-HTML-Code, mit dem ich gerade beginne, enthält <div id="output></div>; alles andere HTML wird durch dieses Javascript hinzugefügt. Ich glaube, das Problem hat damit zu tun, wie ich .each() -Methoden verschachtelt habe und wie ich appendTo() in ihnen verwende.

<script type="text/javascript"> 
     var $boards = $("<div>") 
     .attr("id", "boards") 
     .text("Loading Boards...") 
     .appendTo("#output"); 

     Trello.get("/boards/YSP62hqc/lists", function(boards) { 
      $boards.empty(); 
      $.each(boards, function(ix, board) { 
      $("<h3>") 
      .attr({href: board.url, target: "trello", value : board.id, name : board.id, id : board.id}) 
      .addClass("board") 
      .text(board.name) 
      .appendTo($boards); 
      console.log("List Added"); 
      var resource = "/lists/" + board.id + "/cards"; 
      Trello.get(resource, function(cards) { 
       $cards.empty(); 
       $.each(cards, function(ix, card) { 
       console.log(card.labels[2]); 
       $("<p>") 
       .attr({target: "trello"}) 
       .addClass("card") 
       .text(card.name) 
       .appendTo($cards); 
       }); 
      }); 
      var $cards = $("<div>") 
      .text("Loading Cards...") 
      .appendTo($boards); 
      }); 
     }); 
</script> 

Answer 1

Zu der Zeit, wenn Sie $cards.empty(); und appendTo($cards); nennen, $cards nicht auf dem DOM existiert, die nur deklariert und viel später angehängt, wenn ich richtig bin.

Versuchen Sie, es an das DOM anzuhängen, bevor Sie versuchen, es zu verarbeiten. dh.

var $boards = $("<div>") 
    .attr("id", "boards") 
    .text("Loading Boards...") 
    .appendTo("#output"); 

Trello.get("/boards/YSP62hqc/lists", function(boards) { 
    $boards.empty(); 
    $.each(boards, function(id, board) { 

    $("<h3>") 
     .attr({ href: board.url, target: "trello", value: board.id, name: board.id, id: board.id }) 
     .addClass("board") 
     .text(board.name) 
     .appendTo($boards); 

    var resource = "/lists/" + board.id + "/cards"; 

    var $cards = $("<div>") 
     .text("Loading Cards...") 
     .appendTo($boards); 

    Trello.get(resource, function(cards) { 
     $cards.empty(); 
     $.each(cards, function(ix, card) { 
     $("<p>") 
      .attr({ target: "trello" }) 
      .addClass("card") 
      .text(card.name) 
      .appendTo($cards); 
     }); 
    }); 
    }); 
});