使用AppendTo

Question

我正在使用Trello API和javascript / jquery来创建Trello板的汇总视图。我对jquery很新，我在使用appendTo来正确布局页面时遇到了麻烦。

下面是我在返回javascript内容后获得的HTML。我的目标是将<h3>和<p>标记放在他们自己的div中（因此每个“列表标题”都包含在一个单独的div中），但我只能得到{{1 div中的标记，<p>就在它之外。

<h3>

这是我的javascript。我刚开始的基本HTML只包含<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> ;通过此javascript添加所有其他HTML。我认为这个问题与我如何嵌套.each（）方法以及如何在其中使用appendTo（）有关。

<div id="output></div>

Answer 1

当您致电$cards.empty();和appendTo($cards);时，DOM上不存在$cards，只有在我更正的情况下，才会宣布并附加很久。

尝试将其附加到DOM之前尝试处理它。即

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