自上而下菜單不顯示

Question

我正在使用bootstrap來執行此操作。所以我遵循指導從bootstrap docs創建一個自上而下的菜單。這個自上而下的菜單應該包含一個房間列表。該菜單被稱爲'房間'。我的翡翠和Javascript文件如下（只是自上而下的執行菜單）

editor.jade

extends layout 

block header 
script(src='/javascripts/editor.js') 

block content 
h1(id="title") Editor 

h2 Editor: #{editorName} 
.dropdown 
button#dropdownMenu1.btn.dropdown-toggle.sr-only(type='button', data-toggle='dropdown') 
    | Rooms 
    span.caret 
ul.dropdown-menu(role='menu', aria-labelledby='dropdownMenu1') 
    #rooms 
... 

editor.js內（JavaScript）的

... 
$.getJSON("/getContents", {theRoom: "roomList"}, function(room) { 

    room.activeRooms.forEach(function(theExit){ 

     $('#rooms').replaceWith('<li id="rooms" role="presentation">' + theExit+'</li>') 
    }); 
}); 
... 

不幸的是，沒有自上而下菜單顯示在屏幕上。你能看看我的代碼並告訴我我做錯了什麼嗎？

PS如果我的問題不清楚，可否告訴我，以便我可以詳細說明？

Answer 1

確保http請求已填充並調用回調。然後，像這樣的東西替換你的jQuery部分：

rooms.forEach(function(room){ 
    $('.dropdown-menu').append('<li role="presentation">' +room+' trolol</li>') 
}); 

你現在要做的就是與forEach第一次迭代更換#rooms元素，那麼它不存在了和jQuery無法找到它。

http://jsfiddle.net/t6N9R/3/

（我轉換玉使用在線轉換器中的一個HTML）