使用 AppendTo 显示来自 javascript 的内容

Question

我正在使用 Trello API 和 javascript/jquery 来创建 Trello 看板的摘要视图。我是 jquery 的新手，我在使用 appendTo 正确布置我的页面时遇到了问题。

下面是返回 javascript 内容后我得到的 HTML。我的目标是让 <h3> 和 <p> 标签在它们自己的 div 中（因此每个 "List Title" 都包含在一个单独的 div 中），但是我似乎只能在 div 中获得 <p> 标签，<h3> 就在它的外面。

<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 只包含 <div id="output></div>；所有其他 HTML 都是通过此 javascript 添加的。我认为这个问题与我如何嵌套 .each() 方法以及我如何在其中使用 appendTo() 有关。

<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

当您调用 $cards.empty(); 和 appendTo($cards); 时，$cards 不存在于 DOM 上我是对的。

在尝试处理之前尝试将其附加到 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);
       });
     });
   });
 });

使用 AppendTo 显示来自 javascript 的内容

Displaying content from javascript using AppendTo

javascript

each

jquery

append