jQuery-在html標簽中顯示數據

Question

[解決了]
如何從jQuery代碼在html標記中顯示數據？

我遍歷服務器的json響應，需要將這些元素寫入html中的某些標簽。

我所擁有的：我很好地收到了服務器的響應。 遍歷它也可以。
問題：元素實際上是附加的，我可以看到，因為在完成我的Jquery函數后頁面大小極大地增加了。 但是隨着頁面大小的增加，我看不到任何預期的文字。 我想這是因為默認情況下，我要附加的標簽的父元素被賦予（display：none） 。 但是我實際上是通過$（“＃allowed”）。show（）;來啟動它的出現。 。 仍然沒有用。

我將不勝感激。 提前致謝！

我的HTML摘錄：

   <section id="allowed" style="display:none;">
        <div id="map_canvas"></div>
        <div id="nearest_banks">
            <form action="/nearest_banks/" method="get" id="send_radius">
              Курс ближайших банков на сегодня в радиусе
              <input type="text" name="radius" id="radius" size="5" value={{radius}} >
              <input type="submit" class="button" value="V">
               метров
            </form>
            <div id="places"> </div>
        </div>
    </section>

我的Javascript摘錄：

$("#yes").click(function() {
        $("#ask_user").hide();
        $.ajax({
            type: "post",
            url: '/nearest_banks/radius',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                $("#allowed").show();
                var str = "";
                $("#places").empty();
                $.each(data.places, function(index, element) {
                    str += '<p>' + '<span class="name">' + element.name + '</span>' +
                            '<span class="location">' + element.location + '</span>' +
                            '</p>'
                });
                $('#places').append(str);
            }});
    });

編輯：我找到了解決方案。 實際上，主要問題確實在css中。 仍然有一些關於性能改進和正確語法的答案，因此我根據它們編輯了代碼。 因此，上面的代碼已被編輯，並且運行速度足夠快。 希望這個問題有一天能對某人有所幫助。

Answer 1

找出為什么您的CSS隱藏html。 現在的JS：

json響應示例：

var data.location= [ 
     {"ID": 139004, "Name": "Madison Square Garden", "Adress": "4 Pennsylvania Plaza, New York, NY 10001, United States"}, 
     {"ID": 1390040, "Name": "Eiffel Tower", "Adress": "Champ de Mars, 5 Avenue Anatole France, 
    75007 Paris, France"}, 
     {"ID": 1390059, "Name": "Big Ben", "Adress" : "London SW1A 0AA, United Kingdom"}
    ];

修復： p id ='location_“ + index +”'在html中具有唯一ID或刪除ID屬性

使用元素參數：

success: function (data) {
            $("#allowed").show();
            $.each(data.location, function(index, element) {
                $('#places').append("<p id='location_" + index + "'> ID: " + element.ID+ " Name: " + element.Name +"</p>");
            });            
            console.log(data);
        }});​

使用索引參數

success: function (data) {
            $("#allowed").show();
            $.each(data.location, function(index) {
                $('#places').append("<p id='location_" + index + "'> ID: " + data[index].ID+ " Name: " + data[index].Name +"</p>");
            });            
            console.log(data);
        }});​

追加行json：

success: function (data) {
            $("#allowed").show();
            $.each(data.location, function(index, element) {
                $('#places').append("<p id='location_" + index + "'> " + JSON.stringify(element) + "</p>");
            });            
            console.log(data);
        }});​